Axios的正確食用方法

林恆發表於2021-12-18
iOS

這裡分享出我個人封裝的一個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)
　　}
}

效果圖：

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

 Axios的正確食用方法

 

相關文章