Tip: This article explains in detail the examples of axios in the vue project. When using the Vue.js framework to develop front-end projects, ajax requests are often sent to the server interface. During the development process, axios needs to be further encapsulated to facilitate use in the project. [Learning video sharing: vue video tutorial, web front-end video]
##axios framework Full name (ajax - I/O - system):
for browsers and node.js, Therefore, you can use Promise API
axiosWe have to talk about Ajax. When the old browser page requests data from the server, because the data of the entire page is returned, the page will be forced to refresh, which is not very user-friendly. And we only need to modify part of the data on the page, but the data of the entire page is sent from the server, which consumes a lot of network resources. We only need to modify some data on the page, and we also hope not to refresh the page, so asynchronous network requests come into being.
Ajax(Asynchronous JavaScript and XML): Asynchronous network request. Ajax allows the page to request data without refreshing.
Axios (ajax i/o system): This is not a new The technology is essentially an encapsulation of native XMLHttpRequest, which can be used in browsers and nodejs HTTP clients, but it is based on Promise and complies with the latest ES specifications. Has the following characteristics:
npm install axios
bower install axios
<script></script>
main.js file in the vue project Introduce 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>1. Methods that axios can request:
get: Get data and request the specified Information, returns the entity objectMethod 1
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> //请求格式类似于 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);
})</pre><div class="contentsignin">Copy after login</div></div>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">this.$axios({
method: 'get',
url: '/goods.json',
params: {
id:1
}
}).then(res=>{
console.log(res.data);
},err=>{
console.log(err);
})</pre><div class="contentsignin">Copy after login</div></div>
##3. Post requestPost requests are generally divided into two types
1,form-data
Form submission, this type is more commonly used when uploading pictures and files 2. application/ json is generally used for ajax asynchronous requestsSample code
Method one
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);
})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);
})4, put and patch requestSample code
put request
this.$axios.put('/url',{
id:1
}).then(res=>{
console.log(res.data);
})this.$axios.patch('/url',{
id:1
}).then(res=>{
console.log(res.data);
})5. Delete requestSample code
Parameters are in plain text Submit in the form
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);
})6. Concurrent requestsConcurrent requests: Make multiple requests at the same time and process the return values uniformly
Sample code
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);
})
)示例代码
let instance = this.$axios.create({
baseURL: 'http://localhost:9090',
timeout: 2000
})
instance.get('/goods.json').then(res=>{
console.log(res.data);
})可以同时创建多个axios实例。
axios实例常用配置：
示例代码
//配置全局的超时时长 this.$axios.defaults.timeout = 2000; //配置全局的基本URL this.$axios.defaults.baseURL = 'http://localhost:8080';
示例代码
let instance = this.$axios.create(); instance.defaults.timeout = 3000;
示例代码
this.$axios.get('/goods.json',{
timeout: 3000
}).then()以上配置的优先级为：请求配置 > 实例配置 > 全局配置
拦截器：在请求或响应被处理前拦截它们
示例代码
this.$axios.interceptors.request.use(config=>{
// 发生请求前的处理
return config
},err=>{
// 请求错误处理
return Promise.reject(err);
})
//或者用axios实例创建拦截器
let instance = $axios.create();
instance.interceptors.request.use(config=>{
return config
})示例代码
this.$axios.interceptors.response.use(res=>{
//请求成功对响应数据做处理
return res //该返回对象会传到请求方法的响应对象中
},err=>{
// 响应错误处理
return Promise.reject(err);
})示例代码
let instance = this.$axios.interceptors.request.use(config=>{
config.headers = {
token: ''
}
return config
})
//取消拦截
this.$axios.interceptors.request.eject(instance);示例代码
this.$axios.get('/url').then(res={
}).catch(err=>{
//请求拦截器和响应拦截器抛出错误时，返回的err对象会传给当前函数的err对象
console.log(err);
})示例代码
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('取消后的信息');The above is the detailed content of Let's talk about how to use axios in vue project in this article? Basic usage sharing. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
