1.nuxt做數據交互需要依靠 `@nuxtjs/axios` `@nuxtjs/proxy`
```
npm install @nuxtjs/axios --save --registry=https://registry.npm.taobao.org
npm install @nuxtjs/proxy --save --registry=https://registry.npm.taobao.org
```
2.在nuxt.config.js中進行配置
```
modules:[
'@nuxtjs/axios'
]
```
3.使用`axios`
```
async asyncData({$axios}){
const res = await $axios({url:'接口'})
}
```
4.處理跨域請求， 在nuxt.config.js中進行配置
```
axios:{
proxy:true,//??開啟跨域行為
prefix:'/api/v1/blogApi',??//配置基本的url地址?
??},
proxy:{
'/api':{
target:'http://www.mileduo.com',??//??代理轉發的地址
pathRewrite:{
//?'^/api':''????????????????//?找到地址中的api并替換成空????
???????}
}
??},
```
5.定義攔截器，修改nuxt.config.js
```
plugins:[
{
src:'~/plugins/axios',
'ssr':true // 服務端渲染
}
]
```
6.書寫axios.js
```
export default function({$axios,redirect,route,store}){
//?基本配置
$axios.defaults.timeout?=?1000
$axios.defaults.validateStatus?=?(status)=>{
return status?>=?200?&&?status?<?600
}
//?請求攔截
$axios.onRequest(config=>{
config.headers.token?=?''
return config
????})
//?相應攔截
$axios.onResponse(res\=>{
returnres.data
????})
//?錯誤處理
$axios.onError(error\=>{
return error
????})
}
```
7.Promise返回值
```
return new Promise(resolve=>{
resolve(res.data)
})
```
