Axios的正確食用方法

這里分享出我個人封裝的一個axios，我會盡量每行注釋，希望對大家有所幫助。

1. 安裝

全局執行代碼

npm install axios;

2. 編寫全局axios文件（附件里有代碼）

在src目錄中創建一個axios目錄，里面創建一個index.js文件

寫上全局index.js代碼

import axios from 'axios'//引入axios
const methodType = 'get' | 'post' | 'delete' | 'put'//設置全局提交類型
const DataParamsMethod = ['post', 'delete', 'put']//設置數據提交的類型

export class Http { //定義全局http事件
  header
  httpOpts
  constructor() {
    this.header = {} //設置訪問的header頭部
    this.httpOpts = { //設置默認的訪問參數
      method: 'get', //訪問類型
      noHandleError: false, //訪問失敗
      noHandle401: false, //訪問401
      noHandle403: false, //訪問403
      noHandle500: false //訪問500
    }
  }

  //定義類庫中的get事件
  get(url, data = {}, opts={}) {
    opts.method = 'get' //修改全局提交類型
    return this.request(url, data, opts) // 調用方法，開始訪問
  }
  //定義類庫中的post事件
  post(url, data = {}, opts={}) {
    opts.method = 'post'//修改全局提交類型
    return this.request(url, data, opts)// 調用方法，開始訪問
  }
  //總訪問方法
  request(url, data = {}, opts={}) {
    opts = { ...this.httpOpts, ...opts } // 導入全局類型等數據
    const contentType = 'application/json' //定義返回頭頭部
    return new Promise((resolve, reject) => { //定義promise事件，開始訪問
      const method = opts.method || 'get' //定義訪問類型
      void axios({
        url, //訪問地址
        baseURL: process.env.baseURL || process.env.apiUrl || 'https://static.popodv.com', //設置訪問前綴，可以設置總訪問的前綴
        data: data ? data : {},//post設置數據
        params: opts.method === 'get' ? data : {},//get設置數據
        timeout: 60 * 1000, // 請求超時
        headers: {
          ...this.header, //設置headers頭部
          'content-type': contentType//設置返回頭頭部
        },
        method //設置訪問類型
      })
        .then((res) => { //當有回調時
          if (res.status === 200) {
            return resolve(res.data) //返回數據
          } else if (res.status === 500) { //訪問報錯，參數問題
            return resolve(res.data) //返回數據，方便代碼操作
          }
        })
        .catch(err => {//總訪問報錯
          return reject(err)//調用錯誤回調
        })
    })
  }
}

3. 編寫api文件

在src目錄中創建一個api目錄，里面創建一個index.js文件

寫上各個接口的訪問代碼

// 引入axios封裝文件
import { Http } from '@/axios/index.js'
//定義全局axios事件
const axios = new Http()

// get方法案例
export function getTest () {
　　return axios.get('/data/attr/gfs.json')
}

// post方法案例
export function postTest (name) {
　　return axios.post('https://static.popodv.com/data/attr/gfs.json',{
　　　　name:name
　　})
}

4. 頁面引用

頁面上引入

import {getTest} from '@/api/index.js'

調用代碼

async mounted() {
　　const res = await getTest();
　　if(res.status == 200){
　　　　console.log(res.data)
　　}
}

效果圖：

如果對您有所幫助，歡迎您點個關注，我會定時更新技術文檔，大家一起討論學習，一起進步。