前言： axios 是基于promise的HTTP庫，它有多種特性 ，想了解更多請看官網文檔，這里我只介紹我做項目時使用到的一種特性:
我是Vue 框架實現一個多人共享博客平臺，頁面基本功能有登錄、注冊、注銷、分辨頁面是否在登錄狀態等功能，因此在利用Promise對象在底層二次封裝一個請求和相應數據狀態進行集中判斷的axios，對外暴露register/login/longout/getInfo等方法，

1. 首先安裝axios
   npm install axios --save
2. 在目錄src中創建一個helpers目錄，里面創建一個request.js 文件，內容為封裝二次axios，只要import 引入或設置成windows屬性，就可以在任何地方都可以調用request函數了

import axios from 'axios'  //文件中引入axios
import { Message } from 'element-ui'   //使用element-ui組件實現報錯彈窗提示

//設置響應頭
axios.defaults.headers.post['Content-Typr'] = 'application/x-www-form-rulencoded'
axios.defaults.baseURL =   'http://xxxx.com'
axios.defaults.withCredentials = true  //跨域請求時是否需要憑證

//導出request 函數
export default function request(url,tupe = 'GET',data={}){
     //返回一個promise對象
    return new Promise((resolve,reject) =>{
        //設置一個option對象
        let option:{
            url,
            method:type
        }
        /*
        if(type.tolowerCase() === 'get'){
            option.params = data
        }else{
            option.data = data
        }
        */
        axios(option).then(res =>{
            console.log(res)  //通常使用console.log方法看看代碼有沒有問題
            if(res.data.status === 'ok'){
                  resolve(res.data)
            }else{
                  Message.error(res.data.msg)
                  reject(res.data)
            }
        }).catch(err =>{
                Message.error('網絡異常')
                reject({msg:'網絡異常'})
          })
    })
} 

3.調用request函數，比如我在src/api目錄下目錄下創建了關于博客和登錄相關的組件：auth.js　blog.js

 //用戶相關的組件auth.js
import request from '@/helpers/request.js'

 const URl = {
   REGISTER: '/auth/register',
   LOGIN: '/auth/login',
   LOGOUT: '/auth/logout',
   GET_INFO: '/auth'
}

//暴露出一些函數
export default{
    register({username,password}){
        return request(URL.REGISTER,'POST',{username,password})
    },
    login({username,password}){
        return request(URL.LOGIN,'POST',{username,password})
    },
    logout(){
        return request(URL.LOGOUT)
    },
    getInfo() {
        return request(URL.GET_INFO)
    }
}

這這里暴露出的函數可以通過 vuex中的mapActions等屬性可以獲取到，比如src/login/template.js中可以這樣寫

import  { mapActions } from 'vuex'

export default{
    data(){
        return {
          
        }
    },
    methods:{
        ...mapActions(['login']) //獲取上面組件中暴露出的方法

        //在事件中可以調用這些方法
        onLogin(){
               this.login({username: this.username, password: this.password})
                  .then(()=>{
                      this.$router.push({path: this.$route.query.redirect || '/'})
                  })
              }
        }
} 

src/api/blog.js的方法類似，后續的調用爆出來的方法也是類似的，當然也有很多種方法可以獲取這些方法.

以上就是我理解的axios庫.

遇到的問題及解決方法：就當做是個筆記吧，以免重蹈覆轍.

image.png

輸入以下幾行命令重新安裝就好了

rm -rf node_modules
npm install
npm install axios  --save