axios와 결합하여 프로젝트의api 요청에 대한 봉인 작업

아픈 점:
1. 백엔드에서 모든 요청한 URL을 조정했습니다.
2. 백엔드에서 모든 요청 헤더에 token을 추가하거나 요청에 다른 전역 처리를 추가합니다.
3. 요청 코드를 각 페이지에 직접 작성하면 코드가 비대해 보이고 세련되지 않아 관리하기 어렵다.
4. 요청 코드를 보면 이 요청이 무엇인지 알 수 없고 의미화가 뚜렷하지 않다.
위에서 열거한 것은 흔히 볼 수 있는 문제들이다.api를 봉인하지 않으면 요청이 비교적 많을 때 수정하면 눈물이 나지 않는다. 이런 문제들을 해결하려면 다음과 같은 조작을 할 수 있다.
1.axios에 2차 봉인
2.모든api 요청에도 봉인
다음은 axios에 대한 2차 봉인입니다. 파일 이름은 네트워크/index입니다.js:

import axios from "axios";
import Cookies from "js-cookie";
//  
const myAxios = axios.create({
 timeout: 5000
});

//  
function nav2Login() {
 location.href = '/xxxx/login'
}

//  
myAxios.interceptors.request.use(
 function(config) {
 // Do something before request is sent

 config.headers["token"] = Cookies.get("token") || "";
 return config;
 },
 function(error) {
 // Do something with request error
 return Promise.reject(error);
 }
);

//  
myAxios.interceptors.response.use(
 function(response) {
 // Do something with response data
 //  200 401 ，  
 if (response.status === 200) {
  return response.data;
 } else if (response.status === 401) {
  nav2Login() 
  return Promise.reject();
 } else {
  return {
  status: 0,
  message: response.data.message
  };
 }
 },
 function(error) {
 // Do something with response error
 return Promise.reject(error);
 }
);

export default myAxios;

다음은 모든api를 봉인했습니다. 파일 이름은 네트워크/api입니다.js:

import axios from "./index.js";

const API = {
 userList: 'api/user/all', //  
 cityList: 'api/city/all', //  
};

function Axios(obj) {
 return axios({
 ...obj
 }).catch(e => {
 //  error,  ， 
 return {
  status: 0,
  message: " "
 };
 });
}

//    
function getUserList(params) {
 return Axios({
 url: API.userList,
 method: "post",
 params
 });
}
function getCityList(params) {
 return Axios({
 url: API.cityList,
 method: "get",
 params
 });
}

export default {
 getUserList,
 getCityList,
}

Vue를 예로 들면 이러한 요청을 전체 변수에 마운트할 수 있습니다.

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import api from "@/network/api.js";
Vue.prototype.$api = api;

new Vue({
 router,
 render: h => h(App)
}).$mount('#app')

Vue 프로젝트의 사용 방법은 다음과 같습니다.

this.$api.getUserList(obj).then(res => {
 //  res
}).catch(err){
 //   err
}

//  async await 
async getUserList () {
 try {
  const res = await this.$api.getUserList(obj)
  //  res
 } catch (err) {
  //  err
 }
}

보충 지식: Vue 프로젝트에서 axios 봉인 및api 인터페이스 요청
axios 패키지:

/*  ajax ， : promise ( : response.data) */
import axios from 'axios';
export default function ajax (url, data={}, type='GET') {
 return new Promise(function (resolve, reject) {
 //  ajax 
 let promise
 if (type === 'GET') {
  //  url query ,
  let dataStr = ''           // 
  Object.keys(data).forEach(key => {
  dataStr += key + '=' + data[key] + '&'
  })
  if (dataStr !== '') {
  dataStr = dataStr.substring(0, dataStr.lastIndexOf('&'))
  url = url + '?' + dataStr
  }
  //  get 
  promise = axios.get(url)
 } else {
  //  post 
  promise = axios.post(url, data)
 }
 promise.then(function (response) {
  //  resolve()
  resolve(response.data)
 }).catch(function (error) {
  // reject()
  reject(error)
 })
 })
}

이상의 이는axios와 결합하여 프로젝트 중의api 요청에 대해 봉인 작업을 하는 것이 바로 편집자가 여러분에게 공유한 모든 내용입니다. 여러분께 참고가 되고 저희를 많이 사랑해 주시기 바랍니다.