溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文小編為大家詳細介紹“基于axios在vue中如何使用”，內容詳細，步驟清晰，細節處理妥當，希望這篇“基于axios在vue中如何使用”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。
Axios是一個基于promise的HTTP庫（類似于jQuery的Ajax，用于HTTP請求）
可以用于瀏覽器和node.js（既可以用于客戶端也可以用于node.js編寫的服務端）
支持promise API
攔截請求和響應
轉換請求數據和響應數據
取消請求
自動轉換 JSON 數據
客戶端支持防御 XSRF
$ npm install axios
$ bower install axios
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
先介紹一下，Axios常用的幾種請求方法有哪些：get、post、put、patch、delete
get：（一般用于）獲取數據
post：提交數據（表單提交+文件上傳）
put：更新（或編輯）數據（所有數據推送到后端（或服務端））
patch：更新數據（只將修改的數據推送到后端）
delete：刪除數據
題外話，一般公司在實際開發項目過程中：
（1）post：一般用于新建
（2）put：一般用于更新（適合數據量比較少的更新）
（3）patch：一般用于數據量比較大；假如一個表單的數據量很大，有很多項，使用put的話，全部數據推送一次是比較耗性能的，這個時候可以考慮用patch，只將修改的數據推送到后端
以上這些題外話，只是一般的常規用法，不能代表一定要這樣用；當然了，你可能會說我用post來獲取數據，行不行？這個當然行了，絕對沒問題！具體怎么用還是前后端一起商量著決定，以免發生不愉快的肢體沖突！
哈哈哈，嚴重了啊，開個玩笑！
（1）get 請求
<template>
<div>
<div>mmmm</div>
</div>
</template>
<script>
import axios from 'axios'
// get 請求
export default {
name: "get",
created() {
//第一種寫法叫做get別名請求方法
//http://localhost:8080/static/data.json?id=1
axios.get('../../static/data.json', {
params: {//有參數時,若無參數時直接省略不寫
id: 1
}
}).then((res) => {
console.log('數據：', res);
})
//第二種寫法
axios({
method: 'get',
url: '../../static/data.json',
params: {
id: 1
}
}).then((res) => {
console.log('數據：', res)
})
}
}
</script>
<style scoped>
</style>下面了解一下請求信息---
Status Code:304 Not Modified---304是重定向；正常情況下，第一次訪問接口的時候返回的 都是200；當你第二次訪問接口的時候，如果數據沒有變化， 那么瀏覽器會自動識別返回一個狀態304，代表數據沒有更改 、重定向；相當于重定向到你剛剛訪問的資源，這樣的話會加載 更快！
（2） post 請求
<template>
<div>
<div>mmmm</div>
</div>
</template>
<script>
import axios from 'axios'
// post 請求
export default {
name: "post",
created() {
/*
post常用的請求數據（data）格式有兩種：
（1）applicition/json
（2）form-data 表單提交（圖片上傳，文件上傳）
*/
//第一種寫法叫做post別名請求方法
// http://localhost:8080/static/data.json?id=1
// applicition/json 請求
let data = {
id: 1
}
axios.post('../../static/data.json', data)
.then((res) => {
console.log('數據：', res);
})
//第二種寫法
axios({
method: 'post',
url: '../../static/data.json',
data: data,
}).then((res) => {
console.log('數據：', res)
})
// form-data 請求
let formData = new FormData()
for (let key in data) {
formData.append(key, data[key])
}
axios.post('../../static/data.json', formData)
.then((res) => {
console.log('數據：', res);
})
}
}
</script>
<style scoped>
</style>了解一下，post兩種請求方式的Content-Type和參數有哪些不同---
applicition/json：如下圖
form-data：如下圖
（3）put、patch 請求
說明一下，put和patch請求與post請求用法一樣類似，同樣有applicition/json和form-data，為了節省時間就不過多贅述了，簡單寫一下！
<template>
<div>
<div>mmmm</div>
</div>
</template>
<script>
import axios from 'axios'
// put、patch 請求
export default {
name: "put，patch",
created() {
let data = {
id: 1
}
// put 請求
axios.put('../../static/data.json', data)
.then((res) => {
console.log('數據：', res);
})
// patch 請求
axios.patch('../../static/data.json', data)
.then((res) => {
console.log('數據：', res);
})
}
}
</script>
<style scoped>
</style>（4）delete 請求
delete請求與前四種請求稍有一點不同：delete請求有時候需要把參數拼接到URL上，有時候像post請求那樣把參數放在請求體里面。至于具體怎么調用，需要和后端商量好！
<template>
<div>
<div>mmmm</div>
</div>
</template>
<script>
import axios from 'axios'
// delete 請求
export default {
name: "delete",
created() {
// delete 請求
axios.delete('../../static/data.json', {
params: {// 把參數拼接到URL上
id: 1
}
})
.then((res) => {
console.log('數據：', res);
})
axios.delete('../../static/data.json', {
data: {// 把params改成data，把參數放在請求體里面
id: 1
}
})
.then((res) => {
console.log('數據：', res);
})
// 不用別名方法
axios({
method: 'delete',
url: '../../static/data.json',
//params: {id: 1},// 把參數拼接到URL上
data: {id: 1}// 把參數放在請求體里面
}).then((res) => {
console.log('數據：', res)
})
}
}
</script>
<style scoped>
</style>了解一下，把參數拼接到URL上和放在請求體里面有什么不同---
params（把參數拼接到URL上），如下圖：
data（把參數放在請求體里面），如下圖：
（5）并發請求
并發請求：同時進行多個請求，并統一處理返回值。
<template>
<div>
<div>mmmm</div>
</div>
</template>
<script>
import axios from 'axios'
// 并發請求
export default {
name: "get",
created() {
// 并發請求用到了axios的兩個方法：axios.all('參數是一個數組')、axios.spread('回調函數')
axios.all([
axios.get('../../static/data.json'),
axios.get('../../static/city.json')
]).then(axios.spread((dataRes, cityRes) => {
console.log(dataRes, cityRes)
}))
}
}
</script>
<style scoped>
</style>（1）axios實例和配置
<template>
<div>
<div>mmmm</div>
</div>
</template>
<script>
import axios from 'axios'
// axios 實例
// 后端接口地址有多個，并且超時時長不一樣
export default {
name: "get",
created() {
//創建axios實例
let instance = axios.create({//參數配置
baseURL: 'http://localhost:8080',//請求的域名(或基本地址)
timeout: 3000,//請求的超時時長(默認：1000毫秒(ms)，超過這個時長會報401超時)
//url: '../../static/data.json',//請求的路徑
//method: 'get',//請求方法
headers: {//設置請求頭(給請求頭添加一些參數)
token: ''
},
//params: {id: 1},//請求參數拼接在URL上
//data: {id: 1}//請求參數放在請求體
})
instance.get('../../static/data.json', {
params: {
id: 1
}
})
.then((res) => {
console.log(res)
})
//假如有兩個域名或設置超時時長不一樣，你可以再創建一個axios實例
let instance2 = axios.create({
baseURL: 'http://localhost:9090',
timeout: 5000
})
instance2.get('../../static/data.json', {
params: {
id: 1
}
})
.then((res) => {
console.log(res)
})
//1.axios全局配置
axios.defaults.baseURL = 'http://localhost:8080';
axios.defaults.timeout = 3000;
//2.axios實例配置
let instance = axios.create();
instance.defaults.timeout = 4000;
//3.axios請求配置
instance.get('../../static/data.json', {
timeout: 6000
})
.then((res) => {
console.log(res)
})
//優先級從低到高：1.axios全局配置 < 2.axios實例配置 < 3.axios請求配置
}
}
</script>
<style scoped>
</style>（2）攔截器
<template>
<div>
<div>mmmm</div>
</div>
</template>
<script>
import axios from 'axios'
// 攔截器：在請求或響應被處理前攔截它們
// 請求攔截器、響應攔截器
export default {
name: "get",
created() {
//請求攔截器
axios.interceptors.request.use(config => {
//在發送請求前做些什么
return config;
}, err => {
//在請求錯誤的時候做些什么
return Promise.reject(err);
})
//響應攔截器
axios.interceptors.response.use(res => {
//請求成功對響應數據做處理
return res;
}, err => {
//響應錯誤做些什么
return Promise.reject(err);
})
//取消攔截器(了解)
let interceptors = axios.interceptors.request.use(config => {
config.headers = {
auth: true
}
return config;
})
axios.interceptors.request.eject(interceptors);
//例子：登錄狀態（token:''） 需要登錄的接口
let instance = axios.create({});
instance.interceptors.request.use(config => {
config.headers.token = '';
// config.headers = {//這種寫法會覆蓋掉headers中的其他參數，導致headers中只包含token這一個參數，所以不建議這種寫法
// token: ''
// }
return config;
}, err => {
return Promise.reject(err);
})
//移動端彈窗
let instance_phone = axios.create({});
instance_phone.interceptors.request.use(config => {
$('#modal').show();
return config;
})
instance_phone.interceptors.response.use(res => {
$('#modal').hide();
return res;
})
}
}
</script>
<style scoped>
</style>在vue項目中，和后臺交互獲取數據這塊，我們通常使用的是axios庫，它是基于promise的http庫，可運行在瀏覽器端和node.js中。axios有很多優秀的特性，例如攔截請求和響應、取消請求、轉換json、客戶端防御XSRF等。
在一個完整的項目中，和服務端的交互會很頻繁，一個項目會有很多請求，冗余代碼很多。所以將請求封裝，統一管理還是很有必要的。
本文介紹的axios的封裝主要目的就是在幫助我們簡化項目代碼和利于后期的更新維護。
（1）第一步：src/api/request.js
import axios from 'axios'
// import Vue from 'vue';
// import store from '../store';
// import {router} from '../router/index';
// let vm = new Vue();
const instance = axios.create({
baseURL: 'http://localhost:8080',
timeout: 3000,
// headers: {
// post: {
// 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
// }
// }
})
// 請求攔截
instance.interceptors.request.use(config => {
// 自定義header，可添加項目token
// if (store.state.app.token) {
// config.headers.token = store.state.app.token;
// config.headers.timestamp = new Date().getTime();
// }
return config;
}, error => {
return Promise.reject(error);
})
// 響應攔截
instance.interceptors.response.use(response => {
// const resCode = response.status;
// if (resCode === 200) {
// return Promise.resolve(response);
// } else {
// return Promise.reject(response);
// }
return response;
}, error => {
// const resCode = error.response.status;
// switch (resCode) {
// case 401:
// vm.$Message.error(error.response.data.message);
// store.commit('logout', this);
// store.commit('clearOpenedSubmenu');
// // console.log('token-0', store.state.app.token);
// router.replace({
// name: 'login'
// });
// break;
// case 404:
// vm.$Message.error('網絡請求不存在');
// break;
// case 500:
// vm.$Message.error('服務器連接錯誤');
// break;
// // 其他狀態碼錯誤提示
// default:
// vm.$Message.error(error.response.data.message);
// }
return Promise.reject(error);
})
/*
*封裝get方法
*@param{String} url [請求地址]
*@param{Object} params 請求參數
*/
export function Get(url, params) {
return new Promise((resolve, reject) => {
instance.get(url, {
params: params
}).then((res) => {
resolve(res.data);
}).catch((error) => {
reject(error.data);
})
})
}
/**
*封裝post方法
*@param{String} url 請求地址
*@param{Object} params 請求參數
*/
export function Post(url, params) {
return new Promise((resolve, reject) => {
instance.post(url, params).then((res) => {
resolve(res.data);
}).catch((error) => {
reject(error.data);
})
})
}
/**
*封裝put方法
*@param{String} url 請求地址
*@param{Object} params 請求參數
*/
export function Put(url, params) {
return new Promise((resolve, reject) => {
instance.put(url, params).then((res) => {
resolve(res.data);
}).catch((error) => {
reject(error.data);
})
})
}
/**
*封裝patch方法
*@param{String} url 請求地址
*@param{Object} params 請求參數
*/
export function Patch(url, params) {
return new Promise((resolve, reject) => {
instance.put(url, params).then((res) => {
resolve(res.data);
}).catch((error) => {
reject(error.data);
})
})
}
/**
*封裝delete方法
*@param{String} url [請求地址]
*@param{Object} params [請求參數]
*/
export function Delete(url, params) {
return new Promise((resolve, reject) => {
instance.delete(url, {
params: params
}).then((res) => {
resolve(res.data);
}).catch((error) => {
reject(error.data);
})
})
}（2）第二步：src/api/index.js
import {Get,Post,Put,Patch,Delete} from "@/api/request";
export default {
getListData: (params) => {
return Get('../../static/data.json',params);
},
postListData: (params) => {
return Post('../../static/data.json',params);
},
deleteListData: (params) => {
return Delete('../../static/data.json',params);
}
}（3）第三步：src/main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store/store'
import Api from './api/index';
Vue.config.productionTip = false
Vue.prototype.$axios = Api;
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})（4）第四步：src/components/HelloWorld.vue
<template>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {}
},
methods: {
getData() {
let data = {
id: 1
}
this.$axios.getListData(data)
.then((res) => {
console.log(res);
})
},
postData() {
let data = {
id: 1,
msg: 2
}
this.$axios.postListData(data)
.then((res) => {
console.log(res);
})
},
postFormData() {
let data = {
id: 1,
msg: 2
}
let formData = new FormData();
for (let key in data) {
formData.append(key, data[key]);
}
this.$axios.postListData(formData)
.then((res) => {
console.log(res);
})
},
deleteData() {
let data = {
id: 1
}
this.$axios.deleteListData(data)
.then((res) => {
console.log(res);
})
},
},
created() {
this.getData();
this.postData();
this.postFormData();
this.deleteData();
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>讀到這里，這篇“基于axios在vue中如何使用”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
