Comment utiliser Vue pour encapsuler secondairement le plug-in axios

Cette fois, je vais vous montrer comment utiliser Vue pour ré-encapsuler le plug-in axios. Quelles sont les précautions pour utiliser Vue pour ré-encapsuler le plug-in axios. Voici des cas pratiques. , jetons un coup d'oeil.

Quelle que soit la méthode utilisée pour obtenir les données, pour un projet, le code doit être facile à maintenir et deuxièmement, il doit être magnifiquement écrit, donc l'ajout d'une couche d'encapsulation est nécessaire

vuejs2.0 vue-resource n'est plus maintenu, vuejs2.0 a utilisé axios, ce qui est la principale raison pour laquelle je vais passer à axios, sans plus tarder :

Exigences de base en matière d'emballage :

1. Configuration d'url unifiée

2. Demande d'API unifiée

3. intercepteur de requête (requête), par exemple : Apportez un jeton, etc., définissez l'en-tête de la demande

4. intercepteur de réponse (réponse), par exemple : gestion des erreurs unifiée , redirection de page, etc.

5. Si nécessaire, combinez Vuex pour effectuer une animation de chargement global ou une gestion des erreurs

6. Encapsulez axios dans un plug-in Vue et utilisez-le

Structure des fichiers

Utilisez vue-cli pour l'encapsulation associée, sous le dossier src :

src
  |
-- http 封装axios模块文件夹
   |
---- config.js axios的默认配置
---- api.js 二次封装axios，拦截器等
---- interface.js 请求接口文件
---- index.js 将axios封装成插件

config.js

Référez-vous à gitHub pour la configuration par défaut. Ce qui suit n'est qu'un exemple :

export default {
  method: 'post',
  // 基础url前缀
  baseURL: 'https://easy-mock.com/mock/5ad75e9f41d4d65f0e935be4/example',
  // 请求头信息
  headers: {
   'Content-Type':'application/json;charset=UTF-8'
  },
  // 参数
  data: {},
  // 设置超时时间
  timeout: 10000,
  // 携带凭证
  withCredentials: false,
  // 返回数据类型
  responseType: 'json'
}

PS : voici un outil Mock Easy Mock recommandé. outil. J'écrirai séparément sur la façon d'utiliser cet outil lorsque j'en aurai le temps à l'avenir.

api.js

import axios from 'axios' // 注意先安装哦
import config from './config.js' // 倒入默认配置
import qs from 'qs' // 序列化请求数据，视服务端的要求
export default function $axios (options) {
  return new Promise((resolve, reject) => {
    const instance = axios.create({
      baseURL: config.baseURL,
      headers: {},
      transformResponse: [function (data) {}]
    }
  )
  // request 拦截器
  instance.interceptors.request.use(
    config => {
      // Tip: 1
      // 请求开始的时候可以结合 vuex 开启全屏的 loading 动画
      // Tip: 2 
      // 带上 token , 可以结合 vuex 或者重 localStorage
      // if (store.getters.token) {
      //   config.headers['X-Token'] = getToken() // 让每个请求携带token--['X-Token']为自定义key 请根据实际情况自行修改
      // } else {
      //   // 重定向到登录页面  
      // }
      // Tip: 3
      // 根据请求方法，序列化传来的参数，根据后端需求是否序列化
      if (config.method.toLocaleLowerCase() === 'post' 
        || config.method.toLocaleLowerCase() === 'put' 
        || config.method.toLocaleLowerCase() === 'delete') {
        config.data = qs.stringify(config.data)
      }
      return config
    },
    error => {
      // 请求错误时做些事(接口错误、超时等)
      // Tip: 4
      // 关闭loadding
      console.log('request:', error) 
    
      // 1.判断请求超时
      if (error.code === 'ECONNABORTED' && error.message.indexOf('timeout') !== -1) {
        console.log('根据你设置的timeout/真的请求超时 判断请求现在超时了，你可以在这里加入超时的处理方案')
        // return service.request(originalRequest);//例如再重复请求一次
      }
      // 2.需要重定向到错误页面
      const errorInfo = error.response
      console.log(errorInfo)
      if (errorInfo) {
        // error =errorInfo.data//页面那边catch的时候就能拿到详细的错误信息,看最下边的Promise.reject
        const errorStatus = errorInfo.status; // 404 403 500 ... 等
        router.push({
          path: `/error/${errorStatus}`
        })
      }
      return Promise.reject(error) // 在调用的那边可以拿到(catch)你想返回的错误信息
    }
  )
 
  // response 拦截器
  instance.interceptors.response.use(
    response => {
      let data;
      // IE9时response.data是undefined，因此需要使用response.request.responseText(Stringify后的字符串)
      if(response.data == undefined){
        data = response.request.responseText
      } else{
        data = response.data
      }
      // 根据返回的code值来做不同的处理（和后端约定）
      switch (data.code) {
        case '':
        break;
        default:
      }
      // 若不是正确的返回code，且已经登录，就抛出错误
      // const err = new Error(data.description)
      // err.data = data
      // err.response = response
      // throw err
      return data
    },
    err => {
      if (err && err.response) {
        switch (err.response.status) {
          case 400:
          err.message = '请求错误'
          break
      
          case 401:
          err.message = '未授权，请登录'
          break
      
          case 403:
          err.message = '拒绝访问'
          break
      
          case 404:
          err.message = `请求地址出错: ${err.response.config.url}`
          break
      
          case 408:
          err.message = '请求超时'
          break
      
          case 500:
          err.message = '服务器内部错误'
          break
      
          case 501:
          err.message = '服务未实现'
          break
      
          case 502:
          err.message = '网关错误'
          break
      
          case 503:
          err.message = '服务不可用'
          break
      
          case 504:
          err.message = '网关超时'
          break
      
          case 505:
          err.message = 'HTTP版本不受支持'
          break
      
          default:
        }
      }
      console.error(err)
      // 此处我使用的是 element UI 的提示组件
      // Message.error(`ERROR: ${err}`);
      return Promise.reject(err) // 返回接口返回的错误信息
    }
  )
 
  //请求处理
  instance(options)
    .then((res) => {
      resolve(res)
      return false
    })
    .catch((error) => {
      reject(error)
    })
  })
}

interface.js

import axios from './api' // 倒入 api
/* 将所有接口统一起来便于维护
 * 如果项目很大可以将 url 独立成文件，接口分成不同的模块
 * 此处的数据依然来自 Easy Mock
 */
// 单独倒出
export const query = params => {
  return axios({
    url: '/query',
    method: 'get',
    params
  })
}
 
export const mock = params => {
  return axios({
    url: '/mock',
    method: 'get',
    params
  })
}
export const upload = data => {
  return axios({
    url: '/upload',
    method: 'post',
    data
  })
}
// 默认全部倒出
// 根绝需要进行 
export default {
  query,
  mock,
  upload
}

index.js

est encapsulé dans un plug-in Vue, qui peut être utilisé en (haut) (B) et (grille)

// 倒入所有接口
import apiList from './interface'
const install = Vue => {
  if (install.installed) 
    return;
  install.installed = true;
  Object.defineProperties(Vue.prototype, {
    // 注意哦，此处挂载在 Vue 原型的 $api 对象上
    $api: {
      get() {
        return apiList
      }
    }
  })
}
export default install

Utilisation

À ce stade, tout est prêt. Effectuez les opérations suivantes dans main.js :

// 倒入 http 文件夹下的 index.js
import api from './http/index'
Vue.use(api)
// 此时可以直接在 Vue 原型上调用 $api 了

Résumé

1. Au-dessus du l'encapsulation secondaire est plus complète et répond essentiellement à nos besoins précédents

2. En termes de gestion des erreurs, nous devons également nous mettre d'accord sur la valeur de retour avec le backend et conclure des accords spécifiques

3. Il y a beaucoup de rappels encapsulés. Lorsque vous les utilisez, vous devez également ajouter then() pour traiter les résultats. En savoir plus sur async & wait. Bien sûr, les bonnes choses doivent être cachées. Je ne les partage pas...

PS : IE9 ne prend pas en charge Promise. Vous devez installer un polyfill

import 'babel-polyfill'

Je crois que vous maîtrisez la méthode après avoir lu. C'est le cas dans cet article. Pour des choses plus excitantes, veuillez faire attention à php Autres articles connexes sur le site chinois !

Lecture recommandée :

Comment utiliser les composants parent-enfant dans Vue pour communiquer les composants de la liste de tâches

Comment utiliser Vue pour intégrer les modèles AdminLTE

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!