nuxt中使用axios 封装api

安装axios

cnpm install axios --save

在plugins文件夹下面创建request.js

import axios from "axios";// 创建一个axios实例
const service = axios.create({
    baseURL:"", // url = base url + request url
    withCredentials: true, // send cookies when cross-domain requests
    timeout: 10000, // request timeout 10s
});

// 请求拦截器
service.interceptors.request.use(config => {
    // do something before request is sent
    return config;
},error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error);
});

// 响应拦截器
service.interceptors.response.use(response => {
    //do something before response
    if (response.status >= 200 && response.status <= 210) {
        return response;
    } else if(response.status == 404){
        console.error(response.data.errmsg);
    }else{
        // 不走
    }
},
error => {
    console.log('err' + error); // for debugreturn Promise.reject(error);
})

export default service;

创建一个api文件夹里面创建user.js 假设这里是用户相关的接口

import request from '@/plugins/request';
import proxy from '@/utils/proxy';

export function repeatUserName(param){
//用户名验重  false为不重复  true为重复  测试接口
    return new Promise(resolve=>{
        request({
            url:proxy.lipeng+`/api/1/user/repeat/username?userOrgId=${param.userOrgId}&username=${param.username}`,
            method:"GET",
            params:null
        }).then(res=>{
            if(res.data.code==0){
                resolve(res.data.data)
            }else{
                console.error(res.data.message);
            }
        }).catch(err=>{
            console.error(err);
        })
    });
}

我这里专门弄了个proxy.js专门来管理代理的，此文件在utils文件夹下放着 utils/proxy.js

const onlineIP = "http://182.92.xxx.xxx:8xxx"


//全局变量
let lipeng = "";
if(process.server){
  // 服务端不用走本地代理
  lipeng = process.env.NODE_ENV === "production" ? onlineIP + "/qiantai" : "http://182.92.xxx.xxx:8xxx";
}

if(process.client){
  //客户端走本地代理
  lipeng = process.env.NODE_ENV === "production" ? onlineIP + "/qiantai" : "/test";
}
  
export default {
  lipeng
}

另外设置本地代理不要按照之前vue单页项目的方式设置了，这里需要额外安装一个插件

安装@gauseen/nuxt-proxy包依赖

cnpm install @gauseen/nuxt-proxy --save

在nuxt.config.js中配置如下：

modules: [
    "@gauseen/nuxt-proxy"
],

proxyTable:{
  /**
   * 代理
   */
    "/test": {
      target: "http://182.92.xxx.xxx:8001",//测试服务器
      // target: "http://192.168.x.xxx:8008",//xxx
      changeOrigin: true,
      pathRewrite: {
        "^/test": ""
      }
    },
    "/mock": {
      target:'http://39.97.xxx.xxx:8095/mock/21',
      changeOrigin: true,
      pathRewrite: {
        "^/mock": ""
      }
    },
  },

然后在页面中就可以这样使用了：

import {repeatUserName} from "~/api/user";

mounted() {
    repeatUserName({userOrgId:2,username:"xxx"})
 },

我成功的获取到了数据：

另外我试试能否在asyncData生命周期中使用！！！

依然成功！！！！！！！！！！！（终于搞通了！！！！！）

下面介绍一下一般的方法：

如果上面的方法，跑通了，就不需要用下面的方法了，因为上面的方法比较系统

然后参考文档这样请求却请求成功了：

import axios from "axios";

async asyncData({isDev, route, store, env, params, query, req, res, redirect, error}) {
    let {data:{data:bb}}=await axios(`http://182.92.xxx.xxx:8001/api/1/user/repeat/username?userOrgId=1&username=22`);
    return{
      bb,
    }
  },

那么有一个疑问，如果我想设置请求响应拦截器该在哪设置呢？

看来还的使用官方推荐的@nuxt/axios的方式在nuxt项目中做请求，自己封装的axios在nuxt中好像不大好用，拦截器在网上已经找到答案了，后续更新

安装

npm install @nuxtjs/axios --save

安装：

cnpm install @nuxtjs/proxy --save

nuxt.config.js中配置

modules: [
    '@nuxtjs/axios',
    '@nuxtjs/proxy',
 ],
build: {
    vendor: ['axios'],//防止重复渲染
 },
axios: {
    proxy: true, // 表示开启代理
    prefix: '', // 表示给请求url加个前缀 /api
    credentials: true // 表示跨域请求时是否需要使用凭证
  },
  proxy: {
    "/test": {
      target: "http://18x.92.xxx.xxx:8001",
      changeOrigin: true,
      pathRewrite: {
        "^/test": ""
      }
    },
 }

在页面中使用：

mounted() {
    this.$axios.get(`/test/xxx/1/user/repeat/username?userOrgId=2&username=${encodeURIComponent("刘小兵")}`).then(res=>{
      console.log(res)
    }).catch(err=>{
      console.log(err)
    })
 },

在asyncData中使用：

async asyncData({app,isDev, route, store, env, params, query, req, res, redirect, error}) {
    let rep= await app.$axios.get(`/test/xxx/1/user/repeat/username?userOrgId=2&username=${encodeURIComponent("刘小兵")}`);
    return{
      asyncDataText:"假数据",
      message:rep.data.message
    }
 },

ok!!!

并发请求：

let [a,b] = await Promise.all([
      app.$axios.get(`/test/xxx/1/user/repeat/username?userOrgId=2&username=${encodeURIComponent("刘小兵")}`),
      app.$axios.get(`/test/xxx/1/user/repeat/username?userOrgId=2&username=${encodeURIComponent("刘小兵")}`),
    ])
    return{
      asyncDataText:"假数据",
      message1:a.data.message,
      message2:b.data.code,
   }

ok!!!

。

nuxt中 使用axios 封装api

nuxt中使用axios 封装api