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!!!

 

 

 

。