目錄

一、axios基礎(chǔ)

1、什么是axios？

2、axios的安裝

3、axios常用配置項

4、axios和ajax的區(qū)別?

二、使用axios發(fā)送請求

1、 發(fā)送get無參請求

2、 發(fā)送get有參請求

3、 發(fā)送post無參請求

4、 發(fā)送post有參請求

4.1 發(fā)送json格式的數(shù)據(jù)：

4.2 發(fā)送表單格式的數(shù)據(jù)：

三、 then、catch、finally

四、axios快捷方法

五、axios實例

六、axios的全局配置

七、axios攔截器

八、 axios并發(fā)請求

九、axios二次封裝

---

一、axios基礎(chǔ)

1、什么是axios？

Axios 是一個基于 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。jQuery中也封裝了axios機制，但是僅適用于瀏覽器。

axios功能特點:

• 在瀏覽器中發(fā)送 XMLHttpRequests 請求

• 在 node.js 中發(fā)送 http請求

• 支持 Promise API

• 攔截請求和響應(yīng)

• 轉(zhuǎn)換請求和響應(yīng)數(shù)據(jù)

• 自動轉(zhuǎn)換 JSON 數(shù)據(jù)

2、axios的安裝

使用npm

npm install axios

使用cdn

<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.js"></script>

3、axios常用配置項

只有url選項式必須的，其他的都是可選，這里只列出一些常用配置項，axios還有很多其他的配置項，可以去axios官網(wǎng)查看。

axios({
	// 請求路徑
	url:"",
	// 請求方式,默認(rèn)發(fā)送get請求
	method:"",
	// get請求攜帶的參數(shù)寫在params中
	params:{},
	// post請求攜帶的參數(shù)寫在data中
	data:{},
	// 請求頭
	headers:{},
	// 表示請求超過timeout時間沒有響應(yīng)就中斷 (單位為毫秒)
	timeout:1000,
	// 規(guī)定后端返回的數(shù)據(jù)格式,默認(rèn)值是json
	responseType: 'json'
})

注意：method默認(rèn)值為get，因此發(fā)送get請求時可以不寫methods，responseType默認(rèn)值為json?

4、axios和ajax的區(qū)別?

ajax特點:
?? ?1、ajax是異步的XML和JavaScript?
?? ?2、可以運行瀏覽器 不可以運行在node
?? ?3、發(fā)送給后臺數(shù)據(jù)需要手動轉(zhuǎn)換，請求頭需要手動設(shè)置
?? ?4、后端響應(yīng)的數(shù)據(jù)需要自己轉(zhuǎn)換成js對象格式（后臺相應(yīng)數(shù)據(jù)為json格式）
axios特點:
?? ?1、axios是基于promise的http庫
?? ?2、可以調(diào)用promise的api
?? ?3、axios默認(rèn)發(fā)送就是get請求，發(fā)送數(shù)據(jù)默認(rèn)格式為json
?? ?4、axios請求頭的數(shù)據(jù)格式會自動轉(zhuǎn)換?

二、使用axios發(fā)送請求

1、 發(fā)送get無參請求

axios({
  url:'請求地址'
})

2、 發(fā)送get有參請求

發(fā)送get有參請求時，參數(shù)是以查詢字符串的格式拼接到url地址中的。

我們把get請求需要攜帶的參數(shù)放到params中，axios會自動將它們轉(zhuǎn)成查詢字符串。

axios({
  url:'請求地址',
  // 將要傳給后端的數(shù)據(jù)放到params中,axios會自動將它們轉(zhuǎn)成查詢字符串 (即 ?a=1&b=2)
  params:{
    a:1,
    b:2
  }
})

3、 發(fā)送post無參請求

axios({
  url:'請求地址',
  method:'post'
})

4、 發(fā)送post有參請求

4.1 發(fā)送json格式的數(shù)據(jù)：

使用post請求默認(rèn)發(fā)送的數(shù)據(jù)格式是json格式

axios({
  url:"請求地址",
  method:"post",
  // 在請求頭中指明發(fā)送的數(shù)據(jù)是json格式的數(shù)據(jù),但是這里不寫也可以,因為post請求默認(rèn)發(fā)送的數(shù)據(jù)格式就是json 
  // headers:{
  //   "Content-Type":"application/json"
  // },
  data:{
    a:1,
    b:2
  }
})

4.2 發(fā)送表單格式的數(shù)據(jù)：

使用Qs工具將表單格式數(shù)據(jù)轉(zhuǎn)成json格式的數(shù)據(jù)，需要先引入Qs：

<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.11.0/qs.js"></script>

axios({
  url:"請求地址",
  method:"post",
  // 在請求頭中指明發(fā)送的數(shù)據(jù)是表單格式的數(shù)據(jù),但是這里不寫也可以,因為axios請求頭的數(shù)據(jù)格式會自動轉(zhuǎn)換 
  headers:{
    // "Content-Type":"application/x-www-form-urlencoded",
    // 如果需要token認(rèn)證,可以在請求頭中攜帶
    "Authorization":token
  },
  // 這里使用Qs將表單格式的數(shù)據(jù)轉(zhuǎn)成json格式數(shù)據(jù)傳給后臺,因為后臺需要接收json格式的數(shù)據(jù)
  data:Qs.stringify({
    a:1,
    b:2
  })
})

三、 then、catch、finally

因為axios 是一個基于 promise 的 HTTP 庫，因此它支持promise的api，我們可以在axios中使用then、catch、finally方法。

axios({
  url:"請求地址",
  method:"post",
  headers:{
    "Authorization":token
  },
  data:Qs.stringify({
    a:1,
    b:2
  })
}).then(res=>{
  console.log(res,'獲取響應(yīng)');
}).catch(err=>{
  console.log(err,'打印錯誤信息');
}).finally(()=>{
  console.log('最終執(zhí)行');
})

四、axios快捷方法

axios提供了以下一些快捷方法：（中括號里面的表示可選參數(shù)，config配置對象和axios是一樣的）

axios.request(config)? ?-->等同于?axios(config)

axios.get(url[, config])

axios.delete(url[, config])

axios.head(url[, config])

axios.options(url[, config])

axios.post(url[, data[, config]])? -->data表示要傳遞的參數(shù)

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

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

get、delete、head、options使用方法一致，post、put、patch使用方法一致。

（post 和 put：用來保存多條表單數(shù)據(jù)；patch：用來保存一條表單數(shù)據(jù)）

// 1、get無參請求
axios.get('請求地址').then(res=>{
  console.log(res);
})

//----------------------------------------

// 2、get有參請求
let url = '請求地址'
axios.get(url,{
  params:{
    a:1,
    b:2
  },
  timeout:2000
}).then(res=>{
  console.log(res);
})

//----------------------------------------

// 3、post有參請求
// 3.1 json格式數(shù)據(jù)
let url = '請求地址'
let data = {
  a:1,
  b:2
}
axios.post(url,data).then(res=>{
  console.log(res);
})

//----------------------------------------

// 3.2 表單格式的數(shù)據(jù)
let url = '請求地址'
let data = {
  a:1,
  b:2
}
axios.post(url,Qs.stringify(data),{
  headers:{
    "Authorization":token
  }
}).then(res=>{
  console.log(res);
})

五、axios實例

創(chuàng)建axios實例：
axios.create([config])

// 創(chuàng)建實例
let instance = axios.create({
  baseURL: '基礎(chǔ)路徑',
  timeout: 2000,
  headers:{
    "Authorization": token
  }
})
// 使用實例
instance.post('除去基礎(chǔ)路徑后剩下的路徑',{
  a:1,
  b:2
}).then(res=>{
  console.log(res);
})

六、axios的全局配置

全局配置axios默認(rèn)配置項：給所有axios請求都添加一些默認(rèn)配置項

axios.defaults.baseURL = '基礎(chǔ)路徑';
axios.defaults.headers.common['Authorization'] = token;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

七、axios攔截器

axios給我們提供了兩大類攔截器：

一種是請求攔截器，請求方向的攔截（成功請求，失敗請求）；

另一種是響應(yīng)攔截器，響應(yīng)方向的（成功響應(yīng)，失敗響應(yīng)）

攔截器的作用：用于我們在網(wǎng)絡(luò)請求的時候在發(fā)起請求或者響應(yīng)時對操作進行相應(yīng)的處理。

//請求攔截器 對所有的axios請求做一個攔截
axios.interceptors.request.use(
  config=>{
    // 在發(fā)送請求之前做些什么
    return config
  },
  error=>{
    // 對請求錯誤做些什么
    return Promise.reject(error)
  }
);

// 響應(yīng)攔截器 對響應(yīng)數(shù)據(jù)處理
axios.interceptor.response.use(
  response=>{
    // 對響應(yīng)數(shù)據(jù)做點什么
    return response
  },
  error=>{
    // 對響應(yīng)錯誤做點什么
    return Promise.reject(error)
  }
)

使用：

發(fā)送請求時，如果不是登錄接口，需要攜帶token，那么我們可以在請求攔截器中做相應(yīng)操作，響應(yīng)攔截器主要用來對響應(yīng)數(shù)據(jù)進行提取，因為響應(yīng)攔截器返回的response是axios封裝后的數(shù)據(jù)，而response.data才是后端返回的響應(yīng)數(shù)據(jù)。

//請求攔截器
axios.interceptors.request.use(
  config=>{
    // 在發(fā)送請求之前做些什么
    if(config.url!=='登錄接口'){
      // 需要攜帶token 每一個請求請求頭需要攜帶token
      config.headers.Authorization='token值';
    }
    return config
  },
  error=>{
    // 對請求錯誤做些什么
    return Promise.reject(error)
  }
);
// 響應(yīng)攔截器
axios.interceptor.response.use(
  response=>{
    // 對響應(yīng)數(shù)據(jù)做點什么
    // response.data才是后端返回的響應(yīng)數(shù)據(jù)，response是axios封裝后返回的數(shù)據(jù)
    let res = response.data;
    return res
  },
  error=>{
    // 對響應(yīng)錯誤做點什么
    return Promise.reject(error)
  }
)

axios.post('請求地址',{
  a:1,
  b:2
}).then(res=>{
  console.log(res);
});

八、 axios并發(fā)請求

使用axios并發(fā)請求可以一次性發(fā)送多個異步請求。

處理并發(fā)請求的助手函數(shù)：

axios.all(iterable)

axios.spread(callback)

axios.all([
	axios.get(),
	axios.get(),
	axios.post()
]).then(
	axios.spread((res1,res2,res3)=>{
		console.log(res1,res2,res3); //依次打印每一個響應(yīng)
	})
)

axios.all([
	axios.get(),
	axios.get(),
	axios.post()
]).then(res=>{
	console.log(res) //打印一個數(shù)組，包含上述三個請求的響應(yīng)結(jié)果
})

九、axios二次封裝

我們在vue-cli腳手架中實現(xiàn)對axios的二次封裝。

下載axios

-S 表示在生產(chǎn)環(huán)境下安裝

cnpm i -S axios

下載Qs

cnpm i -S qs

在src下新建文件夾utils，utils文件夾下新建文件request.js?

?src/utils/request.js

import axios from 'axios'
import Qs from 'qs'
let qs = Qs

// 創(chuàng)建axios實例對象
let instance = axios.create({
  baseURL:"基礎(chǔ)路徑",
  timeout:5000
})

// 請求攔截器
instance.interceptors.request.use(config=>{
  // console.log(config,'請求配置項');
  if(config.url !== '登錄接口'){
    config.headers.Authorization = 'token值'
  }
  return config
},error=>{
  alert('請求失敗')
  return Promise.reject(error)
})

// 響應(yīng)攔截器
instance.interceptors.response.use(response=>{
  let res = response.data
  return res
},error=>{
  return Promise.reject(error)
})

// 封裝get方法并導(dǎo)出
export function get(url,params){
  return instance.get(url,{
    params,
  })
}
// 封裝postJSON方法 (發(fā)送json格式數(shù)據(jù))
export function postJSON(url,data){
  return instance.post(url,data)
}
// 封裝post方法 (發(fā)送表單格式數(shù)據(jù))
export function post(url,data){
  return instance.post(url,qs.stringify(data))
}

// 導(dǎo)出axios實例
export default instance

使用：

src/views/AboutView.vue

?src/views/HomeView.vue?