nuxt数据交互

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)

})