#最新
在nuxt.js中 axios的配置

2023-03-23 0 120

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文件

配置:

export default function ({store, redirect, req, router, app: { $axios }})  {
    // 数据访问前缀
    $axios.defaults.baseURL = 'http://XXX/api';
    if(process.server){
        // 获取服务端的token
        var token = getCookie.getcookiesInServer(req).token;
    }
    if(process.client){
        // 获取客户端token
        var token = getCookie.getcookiesInClient('token');
    }
    // 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();
            }
            if(error.response.status == 500){
                // http状态500,服务器内部错误,重定向到500页面
                redirect("/500.htm")
            }
            if(error.response.status == 404){
                // http状态500,请求API找不到,重定向到404页面
                redirect("/404.html")
            }
            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,
            }
        }
收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

© 版权声明: 本站所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 I8N社区 !
=============================================================
本站声明:
1、本站所有资源均来源于互联网,不保证100%完整、不提供任何技术支持;
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途;否则由此产生的法律后果,本站概不负责!

I8N社区 知识库 在nuxt.js中 axios的配置 https://www.i8n.com/3869.html

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务