1. axios的功能和特點(diǎn)

1. 在瀏覽器中發(fā)送 XMLHttpRequests 請(qǐng)求；

2. 在 node.js 中發(fā)送 http請(qǐng)求；

3. 支持 Promise API；

4. 攔截請(qǐng)求和響應(yīng)；

5. 攔截請(qǐng)求和響應(yīng)。

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

1. axios(config);

2. axios.request(config);

3. axios.get(url[, config]);

4. axios.delete(url[, config]);

5. axios.head(url[, config]);

6. axios.post(url[, data[, config]]);

7. axios.put(url[, data[, config]]);

8. axios.patch(url[, data[, config]])。

2. axios的基本使用

2.1 安裝 axios

1. 使用 npm install axios --save 安裝axios。

2.2 在main.js中導(dǎo)入

import axios from 'axios'

2.3 使用 axios 發(fā)送簡(jiǎn)單請(qǐng)求

1. axios發(fā)送請(qǐng)求默認(rèn)返回的是一個(gè) Promise對(duì)象。使用 Promise對(duì)象調(diào)用 then方法處理返回結(jié)果。

2. axios默認(rèn)發(fā)送的是一個(gè) GET請(qǐng)求。

/**
 * 發(fā)送請(qǐng)求，
 * 會(huì)不會(huì)出現(xiàn)跨域?
 * 默認(rèn)發(fā)送的是get請(qǐng)求
 */
axios({
  url: 'http://123.207.32.32:8000/home/multidata',
  methods: 'get'
}).then(value => {
  console.log(value)
})

axios.get('http://123.207.32.32:8000/home/multidata').then(
  value => {
    console.log(value)
  }
)

發(fā)送請(qǐng)求的時(shí)候傳遞參數(shù)

axios({
    url:'http://123.207.32.32:8000/home/multidata',
    params:{
        type:'pop',
        page:1
    }
})

2.4 全局配置

1. 事實(shí)上, 在開(kāi)發(fā)中可能很多參數(shù)都是固定的，這個(gè)時(shí)候我們可以進(jìn)行一些抽取, 也可以利用axiox的全局配置。

axios.defaults.baseURL = ‘xxx.xxx.xxx.xxx:8000’
axios.defaults.headers.post[‘Content-Type’] = ‘a(chǎn)pplication/x-www-form-urlencoded’
axios.defaults.timeout = 5000

2.5 axios常見(jiàn)的配置選項(xiàng)

1. 請(qǐng)求地址 url: '/user';

2. 請(qǐng)求類型 method: 'get';

3. 請(qǐng)根路徑baseURL: 'http://www.mt.com/api';

4. 請(qǐng)求前的數(shù)據(jù)處理transformRequest:[function(data){}];

5. 請(qǐng)求后的數(shù)據(jù)處理transformResponse: [function(data){}];

6. 自定義的請(qǐng)求頭headers:{'x-Requested-With':'XMLHttpRequest'};

7. URL查詢對(duì)象params:{ id: 12 };

8. 查詢對(duì)象序列化函數(shù)paramsSerializer: function(params){ };

9. 請(qǐng)求體 request body data: { key: 'aa'};

10. 超時(shí)設(shè)置ms timeout: 1000;

11. 跨域是否帶 Token withCredentials: false;

12. 自定義請(qǐng)求處理 adapter: function(resolve, reject, config){};

13. 身份驗(yàn)證信息 auth: { uname: '', pwd: '12'};

14. 響應(yīng)的數(shù)據(jù)格式 json / blob /document /arraybuffer / text / stream;

15. 響類型 responseType: 'json';

2.6 axios發(fā)送 并發(fā)請(qǐng)求

1. 有時(shí)我們可能需要同時(shí)發(fā)送 多個(gè)請(qǐng)求，可以使用axios.all()，可以放入多個(gè)請(qǐng)求的數(shù)組，axios.all([])返回結(jié)果是一個(gè)數(shù)組，使用 axios.spread可將數(shù)組[val1,val2]進(jìn)行解構(gòu)。

axios.all([
  axios({
    url: 'http://123.207.32.32:8000/home/multidata'
  })
  ,
  axios({
    url: 'http://123.207.32.32:8000/home/multidata',
    params: {
      type: 'pop',
      page: 4
    }
  })
  /!* 對(duì)返回的結(jié)果數(shù)組進(jìn)行展開(kāi) *!/
]).then(value => {
  console.log(value[0]);
  console.log(value[1]);
})

2.7 axios發(fā)送get請(qǐng)求傳遞參數(shù)的幾種方式

axios發(fā)送get請(qǐng)求傳遞參數(shù)的幾種方式

3. axios的實(shí)例和模塊的封裝

1. 在 src下創(chuàng)建一個(gè) network/request.js，在該文件中封裝axios模塊:

import axios from 'axios'

export default function (config) {
  // 創(chuàng)建一個(gè)新的axios實(shí)例
  const instance = axios.create({
    baseURL: 'http://152.136.185.210:7878/api/m5',
    timeout: 5000
  })
  // 返回請(qǐng)求對(duì)象 返回一個(gè) Promise 對(duì)象
  return instance(config)
}

4. axios 攔截器的使用

4.1 請(qǐng)求攔截可以做的幾件事

1. 當(dāng)發(fā)送網(wǎng)絡(luò)請(qǐng)求時(shí)，頁(yè)面中希望添加一個(gè) loading的組件，作為動(dòng)畫(huà)；

2. 某些請(qǐng)求要求用戶必須登錄，判斷用戶是否有token如果沒(méi)有token則跳轉(zhuǎn)到login頁(yè)面。

3. 對(duì)請(qǐng)求參數(shù)進(jìn)行序列化。

4. 當(dāng)出現(xiàn)請(qǐng)求錯(cuò)誤時(shí)，可以將頁(yè)面跳轉(zhuǎn)到一個(gè)錯(cuò)誤頁(yè)面中。

/**
   * 請(qǐng)求攔截器
   */
  instance.interceptors.request.use(
    config => {
      // 請(qǐng)求成功時(shí)
      console.log(config)
      /**
       *  可能在這里進(jìn)行的處理
       *    1. 需要檢查config的配置
       *    2. 在請(qǐng)求過(guò)程中的動(dòng)畫(huà)
       *    3. 某些網(wǎng)絡(luò)請(qǐng)求是必須攜帶一些特殊的信息 如 token
       */
      console.log(config.headers)

      return config // 需要將config作為返回值返回
    },
    err => {
      // 請(qǐng)求失敗的時(shí)候
      console.log(err)
    }
  )

4.2 響應(yīng)攔截器主要可以做什么？

1. 響應(yīng)的成功攔截中，主要進(jìn)行數(shù)據(jù)的過(guò)濾。

2. 響應(yīng)的失敗攔截中，可以根據(jù) status 判斷報(bào)錯(cuò)的錯(cuò)誤碼，跳轉(zhuǎn)到不同的錯(cuò)誤頁(yè)面。

/**
   * 響應(yīng)攔截器
   *  對(duì)響應(yīng)結(jié)果進(jìn)行的處理
   */
  instance.interceptors.response.use(
    result => {
      // 這里會(huì)將結(jié)果進(jìn)行攔截
      return result.data
      // console.log(result)
    },
    err => {

    }
  )

5. 一個(gè)簡(jiǎn)單request.js請(qǐng)求模塊的封裝

import axios from 'axios'

export default function (config) {
  // 創(chuàng)建一個(gè)新的axios實(shí)例
  const instance = axios.create({
    baseURL: 'http://152.136.185.210:7878/api/m5',
    timeout: 5000
  })

  /**
   * 請(qǐng)求攔截器
   */
  instance.interceptors.request.use(
    config => {
      // 請(qǐng)求成功時(shí)
      console.log(config)
      /**
       *  可能在這里進(jìn)行的處理
       *    1. 需要檢查config的配置
       *    2. 在請(qǐng)求過(guò)程中的動(dòng)畫(huà)
       *    3. 某些網(wǎng)絡(luò)請(qǐng)求是必須攜帶一些特殊的信息 如 token
       */
      console.log(config.headers)

      return config // 需要將config作為返回值返回
    },
    err => {
      // 請(qǐng)求失敗的時(shí)候
      console.log(err)
    }
  )

  /**
   * 響應(yīng)攔截器
   *  對(duì)響應(yīng)結(jié)果進(jìn)行的處理
   */
  instance.interceptors.response.use(
    result => {
      // 這里會(huì)將結(jié)果進(jìn)行攔截
      return result.data
      // console.log(result)
    },
    err => {

    }
  )

  // 返回請(qǐng)求對(duì)象 返回一個(gè) Promise 對(duì)象
  return instance(config)
}