axios封裝，使用攔截器統(tǒng)一處理接口，超詳細(xì)的教程（推薦）

發(fā)布時(shí)間：2020-10-23 05:39:35 來源：腳本之家閱讀：816 作者：小只昵稱被占用了欄目：web開發(fā)

最近從0開始搭了一個(gè)vue-cli的項(xiàng)目，雖然axios也可以直接拿來用，但是對接口比較零散，不太好進(jìn)行維護(hù)，也會(huì)產(chǎn)生大量的重復(fù)代碼，所以筆者對axios進(jìn)行了統(tǒng)一接口處理，廢話不多說，直接上代碼。

首先，在vue-cli項(xiàng)目的src路徑下新建一個(gè)axios文件夾，在axios文件夾里新建aps.js和request.js，api.js用于寫接口，對axios的封裝寫在request.js里，項(xiàng)目機(jī)構(gòu)如圖：

1. axios統(tǒng)一封裝

然后開始統(tǒng)一封裝axios，首先引入axios、qs依賴，引入main.js主要是用于后面對接口進(jìn)行統(tǒng)一處理，比如調(diào)接口的時(shí)候，顯示loading等。這個(gè)main.js根據(jù)你個(gè)人情況，可加可不加。

//request.js
import axios from "axios";
import qs from "qs";
import app from "../main.js";

然后創(chuàng)建一個(gè)axios實(shí)例，這個(gè)process.env.BASE_URL在config/dev.evn.js、prod.evn.js里面進(jìn)行配置：

/****** 創(chuàng)建axios實(shí)例 ******/
const service = axios.create({
  baseURL: process.env.BASE_URL, // api的base_url
  timeout: 5000 // 請求超時(shí)時(shí)間
});

axios實(shí)例創(chuàng)建好之后，開始使用request攔截器對axios請求配置做統(tǒng)一處理，具體如下：

/****** request攔截器==>對請求參數(shù)做處理 ******/
service.interceptors.request.use(config => {
  app.$vux.loading.show({
    text: '數(shù)據(jù)加載中……'
  });
 
  config.method === 'post'
    ? config.data = qs.stringify({...config.data})
    : config.params = {...config.params};
  config.headers['Content-Type'] = 'application/x-www-form-urlencoded';
 
  return config;
}, error => { //請求錯(cuò)誤處理
  app.$vux.toast.show({
    type: 'warn',
    text: error
  });
  Promise.reject(error)
});

然后是對response做統(tǒng)一處理，代碼如下：

/****** respone攔截器==>對響應(yīng)做處理 ******/
service.interceptors.response.use(
  response => { //成功請求到數(shù)據(jù)
    app.$vux.loading.hide();
    //這里根據(jù)后端提供的數(shù)據(jù)進(jìn)行對應(yīng)的處理
    if (response.data.result === 'TRUE') {
      return response.data;
    } else {
      app.$vux.toast.show({ //常規(guī)錯(cuò)誤處理
        type: 'warn',
        text: response.data.data.msg
      });
    }
  },
  error => { //響應(yīng)錯(cuò)誤處理
    console.log('error');
    console.log(error);
    console.log(JSON.stringify(error));
 
    let text = JSON.parse(JSON.stringify(error)).response.status === 404
      ? '404'
      : '網(wǎng)絡(luò)異常，請重試';
    app.$vux.toast.show({
      type: 'warn',
      text: text
    });
 
    return Promise.reject(error)
  }
);

最后，將我們的axios實(shí)例暴露出去，整個(gè)axios的封裝就寫完了。

export default service;

2. axios接口的調(diào)用方式

axios封裝好之后，調(diào)用就很簡單了。我們把接口統(tǒng)一寫在api.js文件里。（當(dāng)然，如果你的業(yè)務(wù)非常復(fù)雜的話，建議把不同業(yè)務(wù)的api分開放到不同的文件里，這樣方便以后維護(hù)）。

注意：post請求參數(shù)放在data里面，get請求參數(shù)放在params里。

//api.js
import service from './request'
 
export const getPersonInfo = data => {
  return service({
    url: '/person_pay/getpersoninfo',
    method: 'post',
    data
  })
};

然后在具體的組件中進(jìn)行調(diào)用。

//index.vue
import {getPersonInfo} from '../axios/api.js'
export default {
  created: async function () {
    const params = {
      card_no: '111'
    };
    let res = await getPersonInfo(params);
    console.log(res);
  }
}

附上項(xiàng)目代碼地址: https://github.com/xie991283109/vueCli-test

以上所述是小編給大家介紹的axios封裝使用攔截器處理接口詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對億速云網(wǎng)站的支持！

向AI問一下細(xì)節(jié)

axios封裝，使用攔截器統(tǒng)一處理接口，超詳細(xì)的教程（推薦）

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽

axios封裝，使用攔截器統(tǒng)一處理接口，超詳細(xì)的教程（推薦）