1、基本用法

安裝

cnpm i axios --save

在 main.js 中引入 axios

import axios from 'axios' Vue.prototype.$axios = axios

在組件中使用 axios

<script>export default {mounted(){this.$axios.get('/goods.json').then(res=>{console.log(res.data);})}} </script>

2、axios請求方法

axios可以請求的方法：

• get：獲取數據，請求指定的信息，返回實體對象
• post：向指定資源提交數據（例如表單提交或文件上傳）
• put：更新數據，從客戶端向服務器傳送的數據取代指定的文檔的內容
• patch：更新數據，是對put方法的補充，用來對已知資源進行局部更新
• delete：請求服務器刪除指定的數據

2.1、get請求

示例代碼

//方法一，請求格式類似于 http://localhost:8080/goods.json?id=1 this.$axios.get('/goods.json',{params: {id:1}}).then(res=>{console.log(res.data);},err=>{console.log(err);})//方法二 this.$axios({method: 'get',url: '/goods.json',params: {id:1}}).then(res=>{console.log(res.data);},err=>{console.log(err);})

2.2、post請求

post請求一般分為兩種類型

• form-data 表單提交，圖片上傳、文件上傳時用該類型比較多
• application/json 一般是用于 ajax 異步請求

示例代碼

//方法一 this.$axios.post('/url',{id:1}).then(res=>{console.log(res.data);},err=>{console.log(err);})//方法二 $axios({method: 'post',url: '/url',data: {id:1} }).then(res=>{console.log(res.data); },err=>{console.log(err); })//form-data請求 let data = {//請求參數 }let formdata = new FormData(); for(let key in data){formdata.append(key,data[key]); }this.$axios.post('/goods.json',formdata).then(res=>{console.log(res.data); },err=>{console.log(err); })

2.3、put和patch請求

示例代碼

//put請求 this.$axios.put('/url',{id:1}).then(res=>{console.log(res.data);})//patch請求 this.$axios.patch('/url',{id:1}).then(res=>{console.log(res.data);})

2.4、delete請求

示例代碼

//參數以明文形式提交 this.$axios.delete('/url',{params: {id:1}}).then(res=>{console.log(res.data);})//參數以封裝對象的形式提交 this.$axios.delete('/url',{data: {id:1}}).then(res=>{console.log(res.data);})//方法二 axios({method: 'delete',url: '/url',params: { id:1 }, //以明文方式提交參數data: { id:1 } //以封裝對象方式提交參數 }).then(res=>{console.log(res.data); })

3、并發請求

并發請求：同時進行多個請求，并統一處理返回值

示例代碼

this.$axios.all([this.$axios.get('/goods.json'),this.$axios.get('/classify.json') ]).then(this.$axios.spread((goodsRes,classifyRes)=>{console.log(goodsRes.data);console.log(classifyRes.data);}) )

4、axios實例

4.1、創建axios實例

示例代碼

let instance = this.$axios.create({baseURL: 'http://localhost:9090',timeout: 2000})instance.get('/goods.json').then(res=>{console.log(res.data); })

可以同時創建多個axios實例。

axios實例常用配置：

• baseURL 請求的域名，基本地址，類型：String
• timeout 請求超時時長，單位ms，類型：Number
• url 請求路徑，類型：String
• method 請求方法，類型：String
• headers 設置請求頭，類型：Object
• params 請求參數，將參數拼接在URL上，類型：Object
• data 請求參數，將參數放到請求體中，類型：Object

4.2、axios全局配置

示例代碼

//配置全局的超時時長 this.$axios.defaults.timeout = 2000; //配置全局的基本URL this.$axios.defaults.baseURL = 'http://localhost:8080';

4.3、axios實例配置

示例代碼

let instance = this.$axios.create(); instance.defaults.timeout = 3000;

4.4、axios請求配置

示例代碼

this.$axios.get('/goods.json',{timeout: 3000}).then()

以上配置的優先級為：請求配置 > 實例配置 > 全局配置

5、攔截器

攔截器：在請求或響應被處理前攔截它們

5.1、請求攔截器

示例代碼

this.$axios.interceptors.request.use(config=>{// 發生請求前的處理return config},err=>{// 請求錯誤處理return Promise.reject(err);})//或者用axios實例創建攔截器 let instance = this.$axios.create(); instance.interceptors.request.use(config=>{return config })

5.2、響應攔截器

示例代碼

this.$axios.interceptors.response.use(res=>{//請求成功對響應數據做處理return res //該返回對象會傳到請求方法的響應對象中},err=>{// 響應錯誤處理return Promise.reject(err);})

5.3、取消攔截

示例代碼

let instance = this.$axios.interceptors.request.use(config=>{config.headers = {token: ''}return config})//取消攔截 this.$axios.interceptors.request.eject(instance);

6、錯誤處理

示例代碼

this.$axios.get('/url').then(res={}).catch(err=>{//請求攔截器和響應攔截器拋出錯誤時，返回的err對象會傳給當前函數的err對象console.log(err);})

7、取消請求

主要用于取消正在進行的http請求。

示例代碼

let source = this.$axios.CancelToken.source();this.$axios.get('/goods.json',{cancelToken: source}).then(res=>{console.log(res)}).catch(err=>{//取消請求后會執行該方法console.log(err)})//取消請求，參數可選，該參數信息會發送到請求的catch中 source.cancel('取消后的信息');

總結

以上是生活随笔為你收集整理的安装axios及其基础用法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。