So verwenden Sie Vue zur sekundären Kapselung des Axios-Plug-Ins

Dieses Mal zeige ich Ihnen, wie Sie Vue zum erneuten Kapseln des Axios-Plug-Ins verwenden , lass uns einen Blick darauf werfen. Unabhängig davon, welche Methode zum Abrufen von Daten verwendet wird, muss der Code für ein Projekt einfach zu warten sein und zweitens muss er schön geschrieben sein, sodass das Hinzufügen einer Kapselungsebene erforderlich ist

vuejs2.0 vue-resource wird nicht mehr gepflegt, vuejs2.0 hat Axios verwendet, was der Hauptgrund ist, warum ich kurzerhand zu Axios wechseln werde:

Grundlegende Verpackungsanforderungen:

Einheitliche URL-Konfiguration
Einheitliche API-Anfrage
Anfrage (Anfrage) Interceptor, zum Beispiel : Token usw. mitbringen, Anforderungsheader festlegen
Antwort-(Antwort-)Interceptor, zum Beispiel: einheitliche
4. Fehlerbehandlung

   , Seitenumleitung usw.

Kombinieren Sie Vuex bei Bedarf, um eine globale Ladeanimation oder Fehlerbehandlung durchzuführen
Axios in ein Vue-Plug-in kapseln und verwenden

Dateistruktur

Verwenden Sie vue-cli für die entsprechende Kapselung im src-Ordner:

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

config.js

Die Standardkonfiguration bezieht sich auf gitHub. Das Folgende ist nur ein Beispiel:

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: Hier wird ein Mock-Tool empfohlen. Die obige Anfrageadresse stammt von diesem Tool. Ich werde darüber schreiben, wie ich dieses Tool separat verwenden kann, wenn ich in Zukunft Zeit habe.

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

Eingekapselt in ein Vue-Plug-in, kann es in (hoher) Verwendung (B) Verwendung (Gitter)

// 倒入所有接口
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

Verwendung

Das heißt Es ist alles fertig. Es ist fast einsatzbereit. Führen Sie die folgenden Vorgänge in main.js aus:

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

Zusammenfassung

Die obige Sekundärseite Die Kapselung ist relativ umfassend und grundsätzlich abgeschlossen, um unsere bisherigen Anforderungen zu erfüllen
In Bezug auf die Fehlerbehandlung müssen wir uns auch auf den Rückgabewert mit dem Backend einigen und eine spezifische Vereinbarung treffen
Kapselungsrückruf Es ist ein bisschen viel, wenn Sie es verwenden, müssen Sie auch then() hinzufügen, um die Ergebnisse zu verarbeiten. Natürlich müssen gute Dinge ausgeblendet werden . Ich werde sie nicht teilen...
PS: IE9 unterstützt Promise nicht. Sie müssen ein Polyfill installieren.

import 'babel-polyfill'

Ich glaube, Sie beherrschen die Methode Nachdem Sie den Fall in diesem Artikel gelesen haben, lesen Sie bitte andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So verwenden Sie Eltern-Kind-Komponenten in Vue, um Todolist-Komponenten zu kommunizieren

So verwenden Sie Vue um AdminLTE-Vorlagen zu integrieren

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Vue zur sekundären Kapselung des Axios-Plug-Ins. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!