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)
})
```
