目錄

一、axios基礎

1、什么是axios？

2、axios的安裝

3、axios常用配置項

4、axios和ajax的區別?

二、使用axios發送請求

1、 發送get無參請求

2、 發送get有參請求

3、 發送post無參請求

4、 發送post有參請求

4.1 發送json格式的數據：

4.2 發送表單格式的數據：

三、 then、catch、finally

四、axios快捷方法

五、axios實例

六、axios的全局配置

七、axios攔截器

八、 axios并發請求

九、axios二次封裝

---

一、axios基礎

1、什么是axios？

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

axios功能特點:

• 在瀏覽器中發送 XMLHttpRequests 請求

• 在 node.js 中發送 http請求

• 支持 Promise API

• 攔截請求和響應

• 轉換請求和響應數據

• 自動轉換 JSON 數據

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官網查看。

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

注意：method默認值為get，因此發送get請求時可以不寫methods，responseType默認值為json?

4、axios和ajax的區別?

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

二、使用axios發送請求

1、 發送get無參請求

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

2、 發送get有參請求

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

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

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

3、 發送post無參請求

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

4、 發送post有參請求

4.1 發送json格式的數據：

使用post請求默認發送的數據格式是json格式

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

4.2 發送表單格式的數據：

使用Qs工具將表單格式數據轉成json格式的數據，需要先引入Qs：

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

axios({
  url:"請求地址",
  method:"post",
  // 在請求頭中指明發送的數據是表單格式的數據,但是這里不寫也可以,因為axios請求頭的數據格式會自動轉換 
  headers:{
    // "Content-Type":"application/x-www-form-urlencoded",
    // 如果需要token認證,可以在請求頭中攜帶
    "Authorization":token
  },
  // 這里使用Qs將表單格式的數據轉成json格式數據傳給后臺,因為后臺需要接收json格式的數據
  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,'獲取響應');
}).catch(err=>{
  console.log(err,'打印錯誤信息');
}).finally(()=>{
  console.log('最終執行');
})

四、axios快捷方法

axios提供了以下一些快捷方法：（中括號里面的表示可選參數，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表示要傳遞的參數

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

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

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

（post 和 put：用來保存多條表單數據；patch：用來保存一條表單數據）

// 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格式數據
let url = '請求地址'
let data = {
  a:1,
  b:2
}
axios.post(url,data).then(res=>{
  console.log(res);
})

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

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

五、axios實例

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

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

六、axios的全局配置

全局配置axios默認配置項：給所有axios請求都添加一些默認配置項

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

七、axios攔截器

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

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

另一種是響應攔截器，響應方向的（成功響應，失敗響應）

攔截器的作用：用于我們在網絡請求的時候在發起請求或者響應時對操作進行相應的處理。

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

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

使用：

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

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

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

八、 axios并發請求

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

處理并發請求的助手函數：

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); //依次打印每一個響應
	})
)

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

九、axios二次封裝

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

下載axios

-S 表示在生產環境下安裝

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

// 創建axios實例對象
let instance = axios.create({
  baseURL:"基礎路徑",
  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)
})

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

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

// 導出axios實例
export default instance

使用：

src/views/AboutView.vue

?src/views/HomeView.vue?