nuxt.js中 axios的配置

1.下载axios

npm i @nuxtjs/axios -s

2. 在nuxt.config.js中配置axios

modules: [
      '@nuxtjs/axios',
  ],

此时， 就可以在组件中使用啦

async asyncData({$axios}) {
  let { res } = await $axios.get(`https://xxx.com/api/xxx`) 
  console.log(res)    
 }

3. 配置axios的baseUrl, 拦截器

3.1 在~/plugins 创建 axios.js文件

配置：

import NProgress from 'nprogress';
import 'nprogress/nprogress.css'

export default function ({store, redirect, req, router, app: { $axios }})  {
    // 数据访问前缀
    $axios.defaults.baseURL = 'http://XXX/api';
    // request拦截器
    $axios.onRequest(config => {
        if(process.client){
            // 客户端下，请求进度条开始
            NProgress.start();
        }
        // 将获取到token加入到请求头中
        config.headers.common['Authorization'] = 'token';
    });
    // response拦截器，数据返回后，可以先在这里进行一个简单的判断
    $axios.interceptors.response.use(
        response => {
            if(process.client){
                // 客户端下， 请求进度条结束
                NProgress.done();
            }
            // return response
            if(response.data.code == 401){
                // 返回401，token验证失败，清除客户端cookie
                Cookie.remove("token");
                  // 重定向到登录页面， 这里做一个判断，容错：req.url 未定义
                if(req.url){
                    redirect("/sign?ref="+req.url)
                }else{
                    redirect("/sign")
                }
            }else if(response.data.code == 404){
                // 重定向到404页面
                redirect("/")
            }
            else{
                // 请求接口数据正常，返回数据
                return response
            }
        },
        error => {
            if(process.client){
                NProgress.done();
            }
            return Promise.reject(error.response)   // 返回接口返回的错误信息
        })
}

3.2 将axios.js添加到nuxt.config.js中，全局使用上面配置

  plugins: [
      '~/plugins/axios',
  ],

就可以在项目中使用啦

注意：nuxt.js中异步获取函数没有this,属性，具体看下方代码

// params: 页面路由相关信息
// $axios: 引入axios
// context：...  详见官方文档 
https://zh.nuxtjs.org/api/context/

async asyncData({params, $axios}){
    let [answer] = await Promise.all([
        $axios.get("/userpage/answer_list/"+params.name)
    ]);
    return {
        answerData: answer.data.data,
    }
}

axios配置使用先更到这里。 如有疑问请留言；或联系邮箱：manbanzhen@qq.com
欢迎访问：http://www.manbanzhen.top 、http://www.ofus.ink
转载请注明出处。