xios是什么？

Axios 是一個(gè)基于 promise 的 HTTP 庫(kù)，可以用在瀏覽器和 node.js 中。我們知道 Promise 是 js 異步的一種解決方案，它最大的特性就是可以通過(guò) .then 的方式來(lái)進(jìn)行鏈?zhǔn)秸{(diào)用。

其實(shí)說(shuō)白了axios是對(duì)ajax的封裝，axios有的ajax都有，ajax有的axios不一定有，總結(jié)一句話就是axios是ajax，ajax不止axios。

為什么選擇axios?

1. vue的作者尤雨溪推薦使用axios.
2. 符合前后端分離的趨勢(shì)，及前端的MVVM的浪潮

功能特點(diǎn)：

支持多種請(qǐng)求方式：

Axios的基本使用

axios的使用比較簡(jiǎn)單，文檔講得也非常清晰，你應(yīng)該先閱讀axios的官方文檔：axios文檔。

在html頁(yè)面中直接引入使用:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Html頁(yè)面基本使用

以下案例中的get請(qǐng)求地址為crmeb相關(guān)演示站地址，可用于測(cè)試獲取！

1. 獲取一個(gè)get請(qǐng)求

<script>
  const url = 'https://store.crmeb.net/api/pc/get_category_product'
  axios({
    url: url,
    method: 'get',  // 這里可以省略，默認(rèn)為get
  }).then(res => {
    // 返回請(qǐng)求到的數(shù)據(jù)
    console.log(res)
  }).catch(err => {
    // 返回錯(cuò)誤信息
    console.log(err)
  })  
</script>

2. 在get請(qǐng)求的url中傳參，只需要定義一個(gè)params:{}即可！

<script>
  const url = 'https://store.crmeb.net/api/pc/get_category_product'
  axios({
    url: url,
    method: 'get',  // 這里可以省略，默認(rèn)為get
    // 這里的鍵值對(duì)會(huì)拼接成這樣url?page=1&limit=3
    params: {
      page: 1,
      limit: 3
    }
  }).then(res => {
    // 返回請(qǐng)求到的數(shù)據(jù)
    console.log(res)
  }).catch(err => {
    // 返回錯(cuò)誤信息
    console.log(err)
  })  
</script>

3. 發(fā)送一個(gè)post請(qǐng)求，與get請(qǐng)求類似，只需要將method改為post，定義一個(gè)data:{}即可,data中的數(shù)據(jù)則是服務(wù)器需要接收的字段數(shù)據(jù)！

<script>
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
}).then(res => {
    // 返回請(qǐng)求到的數(shù)據(jù)
    console.log(res)
  }).catch(err => {
    // 返回錯(cuò)誤信息
    console.log(err)
  });
</script>

4. 發(fā)送一個(gè)并發(fā)請(qǐng)求

如果在開發(fā)中需要等到多個(gè)接口的數(shù)據(jù)同時(shí)請(qǐng)求到后才能繼續(xù)后邊的邏輯，那么即可使用并發(fā)請(qǐng)求，axios并發(fā)請(qǐng)求，使用all方法，all方法的參數(shù)為一個(gè)數(shù)組，數(shù)組的每個(gè)值可以為一次請(qǐng)求，請(qǐng)求完成后直接.then即可合并兩次請(qǐng)求的數(shù)據(jù)，返回結(jié)果為一個(gè)數(shù)組！

<script>
axios.all([
    axios({
        url: 'https://store.crmeb.net/api/pc/get_products',
        params: {
            page: 1,
            limit: 20,
            cid: 57,
            sid: 0,
            priceOrder: '', 
            news: 0,
        }
    }),
    axios({
        url: 'https://store.crmeb.net/api/pc/get_company_info',
    })
]).then(results => {
    console.log(results)
})
</script>

如果你想自動(dòng)把這個(gè)數(shù)組展開的話在then()方法中傳入axios.spread()方法即可，如下所示：

<script>
axios.all([
    axios({
        url: 'https://store.crmeb.net/api/pc/get_products',
        params: {
            page: 1,
            limit: 20,
            cid: 57,
            sid: 0,
            priceOrder: '', 
            news: 0,
        }
    }),
    axios({
        url: 'https://store.crmeb.net/api/pc/get_company_info',
    })
]).then(axios.spread((res1, res2) => {
    console.log(res1);
    console.log(res2);
}))
</script>

但在使用vue組件化開發(fā)的時(shí)候一般我們會(huì)通過(guò)npm安裝，引入項(xiàng)目！

組件化開發(fā)中使用

1. 使用npm進(jìn)行安裝

npm install axios --save

一般在實(shí)際項(xiàng)目中我們并不會(huì)像上邊這樣直接去使用axios請(qǐng)求數(shù)據(jù)，而是將axios封裝在一個(gè)單獨(dú)的文件，這樣做的目的主要是用來(lái)抽取公共邏輯到一個(gè)配置文件里，對(duì)這些公共邏輯做一個(gè)封裝，即使某一天這個(gè)axios框架不維護(hù)了，或者出現(xiàn)了重大bug也不再修復(fù)的時(shí)候，我們可以只修改配置文件即可達(dá)到全局修改的目的，如果把每次請(qǐng)求邏輯都寫到對(duì)應(yīng)的組件中，那修改起來(lái)簡(jiǎn)直就是一個(gè)噩夢(mèng)！

2. 封裝一個(gè)axios的請(qǐng)求文件request.js

在項(xiàng)目的src目錄下創(chuàng)建一個(gè)network文件夾，再在其中創(chuàng)建一個(gè)request.js文件，路徑為：src/network/request.js

// src/network/request.js

// 引入axios
import axios from 'axios'

// 這里未使用default導(dǎo)出，是為了以后的擴(kuò)展，便于導(dǎo)出多個(gè)方法
export function request(config){
    // 創(chuàng)建axios實(shí)例
    const instance = axios.create({
        // 這里定義每次請(qǐng)求的公共數(shù)據(jù)，例如全局請(qǐng)求頭，api根地址，過(guò)期時(shí)間等
        // 具體參數(shù)可參考axios的官方文檔
        baseURL: 'http://demo26.crmeb.net/api',
        timeout: 5000
    })
    
    // 攔截請(qǐng)求，如果獲取某個(gè)請(qǐng)求需要攜帶一些額外數(shù)據(jù)
    instance.interceptors.request.use(
        config => {
            console.log(config);
            return config;
        }, err => {
            console.log(err);
        })
        
    // 攔截響應(yīng)
    instance.interceptors.response.use(
        res => {
            console.log(res)
            return res.data
        }, err => {
            console.log(err)
        }
    )
    
    // 發(fā)送請(qǐng)求
    return instance(config)  

3. 使用我們封裝的request請(qǐng)求

一般我們會(huì)將所有的請(qǐng)求放在一個(gè)api.js文件中，將每次請(qǐng)求封裝為一個(gè)方法,比如我這里會(huì)在request.js的同目錄創(chuàng)建一個(gè)api.js文件封裝我們所有的請(qǐng)求。

import { request } from '../api/request'

// 獲取分類
export const getHomeCategory = () => {
    return request({
        url: '/category'
    })
}

// 獲取banner圖
export const getHomeBanner = () => {
    return request({
        url: '/pc/get_banner'
    })
}

之后再在組件中引入調(diào)用導(dǎo)出的相關(guān)接口方法即可，如：

import { getHomeBanner } from "../network/api"

getHomeBanner().then(res => {
	console.log(res)
})

以上就是一個(gè)簡(jiǎn)單的封裝，其中有個(gè)攔截請(qǐng)求和攔截響應(yīng)，可能很多初學(xué)的人理解起來(lái)有點(diǎn)吃力，我在這里以個(gè)人淺見闡述，希望能帶給你些許啟發(fā)！

何為攔截器？

還是發(fā)揮閱讀理解能力，攔截?cái)r截其實(shí)就是此路是我開，此樹是我栽，要想過(guò)此路，留下買路錢，攔截請(qǐng)求就是比如某些請(qǐng)求需要攜帶一些額外的信息才能訪問(wèn)，實(shí)際項(xiàng)目中最常見的就是需要登錄后才能查看的信息，請(qǐng)求中就必須攜帶token才能訪問(wèn)，就可以在這里處理，還有攔截響應(yīng)，比如請(qǐng)求到數(shù)據(jù)之后，發(fā)現(xiàn)不符合要求，先攔下來(lái)處理一下，再返回給前端，這就是一個(gè)攔截器的基本工作流程！

如下所示：

  // 攔截請(qǐng)求，如果獲取某個(gè)請(qǐng)求需要攜帶一些額外數(shù)據(jù)
    instance.interceptors.request.use(
        config => {
            console.log(config);
            return config;
        }, err => {
            console.log(err);
        })
        
    // 攔截響應(yīng)
    instance.interceptors.response.use(
        res => {
            console.log(res)
            return res.data
        }, err => {
            console.log(err)
        }
    )

axios還為我們提供了一些全局配置，如下：

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

當(dāng)然也可以將其配置在我們之前創(chuàng)建的axios實(shí)例中，使其只作用于某個(gè)實(shí)例！

然后來(lái)看一下 axios 的所有配置信息:

數(shù)據(jù)來(lái)自axios中文文檔

各種請(qǐng)求體格式中，文件上傳是比較特殊的一種，通常其content-type請(qǐng)求頭為multipart/form-data，可以提交文本與文件混合的請(qǐng)求數(shù)據(jù)。這一節(jié)我們通過(guò)兩個(gè)例子來(lái)看看postman怎么調(diào)用文件上傳的請(qǐng)求。

文件格式請(qǐng)求體實(shí)現(xiàn)請(qǐng)求

請(qǐng)求示例1：只包含文件格式參數(shù)的接口

以特斯汀學(xué)院自動(dòng)化測(cè)試平臺(tái)項(xiàng)目上傳頭像圖片的接口為例。

項(xiàng)目地址：http://www.testingedu.com.cn/mypro/#/login

接口地址：http://www.testingedu.com.cn/mypro/api/user/setavatar

從接口抓包信息中可以看到，Content-Type為multipart/form-data; boundary=----WebKitFormBoundarysArkjRsb6TbgepSl，其中的boundry是作為請(qǐng)求體多個(gè)部分的參數(shù)的分割線邊界的，從請(qǐng)求體內(nèi)容第一行就可以看到這個(gè)分割線的值。

在Postman中完成該文件上傳接口的調(diào)用時(shí)，需要選擇body中的form-data，在填寫內(nèi)容時(shí)注意將鼠標(biāo)移到key列輸入框的右側(cè)，會(huì)出現(xiàn)一個(gè)下拉框，可以選擇參數(shù)類型為Text或者File，針對(duì)文件參數(shù)選擇File，并填寫抓包信息中獲取到的鍵名file，最后在VALUEL列中選擇要上傳的文件。

設(shè)置完請(qǐng)求體之后查看請(qǐng)求頭可以看到Content-Type的值已經(jīng)被自動(dòng)設(shè)置為multipart/form-data，而boundry字段則是在請(qǐng)求發(fā)送時(shí)計(jì)算得到。所以使用postman完成文件上傳接口請(qǐng)求時(shí)，并不需要額外設(shè)置Content-Type。

要注意，設(shè)置頭像接口需要前置調(diào)用測(cè)試平臺(tái)登錄接口之后才能正常完成請(qǐng)求，否則會(huì)提示缺少user_id字段，在請(qǐng)求前先參考json格式請(qǐng)求章節(jié)的示例登錄接口http://www.testingedu.com.cn/mypro/api/user/login完成登錄操作之后再調(diào)用設(shè)置頭像接口。

這里，我們完成了一個(gè)只有文件參數(shù)的文件上傳接口，接下來(lái)，再看一個(gè)除了文件參數(shù)，還有文本格式參數(shù)的文件上傳接口。

請(qǐng)求示例2：同時(shí)包含文件與文本格式請(qǐng)求的接口

以特斯汀電商項(xiàng)目個(gè)人信息修改頭像的接口為例。

項(xiàng)目地址：http://www.testingedu.com.cn:8000/Home/User/info.html

接口地址：http://www.testingedu.com.cn:8000/index.php/home/Uploadify/imageUp/savepath/head_pic/pictitle/banner/dir/images.html

從抓包信息中可以看到，請(qǐng)求體中包含了多段由boundry分割開的請(qǐng)求參數(shù)內(nèi)容，除了上傳的文件參數(shù)之外，還包含了部分純文本內(nèi)容的參數(shù)。

將fiddler切換到WebForms格式顯示則可以看到完整的參數(shù)列表，每一行的參數(shù)名為其中name指定的字段。

在Postman中完成請(qǐng)求時(shí)，針對(duì)同時(shí)出現(xiàn)文件和文本格式的請(qǐng)求，在選擇填寫的參數(shù)類型時(shí)，根據(jù)對(duì)應(yīng)類型進(jìn)行選擇并填寫。

由此可以看到，文件上傳格式處理時(shí)，在Postman里只需要按照請(qǐng)求參數(shù)格式選擇并逐個(gè)填寫，并不復(fù)雜。

至此，在Postman中完成常見的幾種請(qǐng)求體格式的請(qǐng)求操作都已實(shí)現(xiàn)。

回顧總結(jié)一下，常用的接口測(cè)試請(qǐng)求體的編輯格式包括如下幾種，和Content-Type頭域分別對(duì)應(yīng)：

• application/x-www-form-urlencoded：url編碼格式 即 鍵=值&鍵=值格式

在Postman中使用x-www-form-urlencoded進(jìn)行填寫，或者使用raw格式填寫，再手動(dòng)設(shè)置Content-Type

• application/json： json格式 即 {"鍵":值,"鍵":值} 格式

在Postman中使用raw格式選擇json完成填寫。

• text/xml：xml格式 即 <鍵>值<鍵>格式

在Postman中使用raw格式填寫，再手動(dòng)設(shè)置Content-Type為text/xml。

• multipart/form-data: 文本與文件混合格式表單，通常用于文件上傳

在Postman中使用form-data填寫，注意文件和文本類型格式，分別選擇Text和File格式。