前言：

你連Axios是什么干什么用的都不知道,那么你去封裝它有意義嗎？

既然要封裝Axios,先了解Axios(沒有時間的直接向下劃!)

axios介紹(W3C)：

axios 是一個基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端，本質上也是對原生XHR(XmlHttpRequest)的封裝，只不過它是Promise的實作版本，符合最新的ES規范，有以下特點：

• 從瀏覽器中創建 XMLHttpRequests
• 從 node.js 創建 http 請求
• 支持 Promise API
• 攔截請求和回應
• 轉換請求資料和回應資料
• 取消請求
• 自動轉換 JSON 資料
• 客戶端支持防御 XSRF

axios優點：

1.支持node端和瀏覽器端

同樣的API，node和瀏覽器全支持，平臺切換無壓力

2.支持 Promise

使用Promise管理異步，告別傳統callback方式

3.豐富的配置項

支持攔截器等高級配置

4.社區支持

axios相關的npm包數量一直在增長

axios缺點：

1、對搜索引擎不友好

2、要實作Ajax下的前后退功能成本較大

3、跨域問題限制

為什么對Axios進行二次封裝？

如果專案比較小你直接使用也沒什么，但是現在我們專案越寫越大，越寫越多 如果這時候還要直接使用的話 那如果后期 后臺改了一個介面或者改了一個引數什么的呢？你是不是還要在很多的頁面里去找到當前頁再進行修改，這個程序太過繁瑣，不利于專案的維護和迭代.

這時統一的區間管理介面,需要修改某一個介面的時候直接在 api 里修改對應的請求是不是很方便，也就是說你需要修改引數或者路徑直接去 api 里修改就好了，就不需要再去一大堆頁面里找了，

上面對Axios做一個簡單的了解

進入正題封裝Axios：

在根目錄下新建一個檔案夾，在當前檔案夾下新建檔案 request.js 檔案

在 request.js 檔案中主要做了三件事：

1、對axios的基本設定

2、請求攔截器

3、相應攔截器

import axios from 'axios' //首先引入axios
import { Toast } from 'vant'

// create an axios instance  創建axios實體
const service = axios.create({
    baseURL: "基地址", // url = base api url + request url
    withCredentials: true, // 是否攜帶 cookies 
    timeout: 5000 // 請求超時時間
})

// request請求攔截器 request interceptor
service.interceptors.request.use(
        config => {
            //vant 輕提示
            Toast.loading({
               message: '加載中...',
               forbidClick: true,
               forbidClick: true
            })
            return Promise.resolve(config) 
        },
        error => {
            // do something with request error
            console.log(error) // for debug
            return Promise.reject(error)
        }
    )

    // respone回應攔截器
service.interceptors.response.use(
    response => {
        Toast.clear()
        const res = response.data
        if (res.status && res.status !== 200) {
            // 登錄超時,重新登錄
            if (res.status === 401) {
                store.dispatch('FedLogOut').then(() => {
                    location.reload()
                })
            }
            return Promise.reject(res || 'error')
        } else {
            return Promise.resolve(res)
        }
    },
    error => {
        Toast.clear()
        console.log('err' + error) // for debug
        return Promise.reject(error)
    }
)
// 最后拋出axios實體 
export default service

封裝請求地址

同檔案夾新建 api.js

在 api.js 中寫一些地址

const api = {
  Login: '/user/login',
  UserInfo: '/user/userinfo',
  UserName: '/user/name'
}

export default api

封裝請求方法

封裝好后 在同檔案夾下 新建檔案user.js

在user.js中將封裝好的Axios匯入 ,資料請求就在user.js中進行

//請求地址
import api from './api'
// axios
import request from './request'

// 登錄
export function login(data) {
  return request({
    url: api.Login,
    method: 'post',
    data
  })
}

// 用戶資訊 post 方法
export function getUserInfo(data) {
  return request({
    url: api.UserInfo,
    method: 'post',
    data,
    hideloading: true
  })
}

// 用戶名稱 get 方法
export function getUserName(params) {
  return request({
    url: api.UserName,
    method: 'get',
    params,
    hideloading: true
  })
}

使用請求方法

因為使用的是 export 匯出的請求方法，所以我們使用時 只需要將方法名匯入即可

//可以匯入多方法
import { nav,appIndex } from "@/http/api"
export default {
  data(){
    return{
      banner_list:[],
      nav_list:[]
    }
  },
  created(){
    this.getbanner();
  },
  methods:{
    async getbanner(){
      const { data:res } = await nav();
      this.banner_list= res
    },
    async getappIndex(){
      const { data:res } = await appIndex();
      this.nav_list = res
      console.log(res);
     }
  }
}

持續更新中 點關注 不迷路！！！