下载安装:
- npm install axios
- npm install vue-axios --save
- 引入
- improt axios from 'axios'
使用axios发起get方式请求
- get方式的无参请求
axios.get(地址)
.then(请求成功的回调).catch(请求失败的回调)
- get方式的带参请求2.安装成功后,在main.js页面引用:
- 使用的方式:
import Vue from 'vue'
import axios from 'axios'
Vue.prototype.$axios = axios //全局注册,使用方法为:this.$axios
Vue.prototype.qs = qs //全局注册,使用方法为:this.qs
3最后开始使用请求:(第一中请求的方式)
<script>
export default{
data(){
return{
userId:666,
token:'',
}
},
created(){
this.$axios({
method:'post',
url:'api',
data:this.qs.stringify({ //发送给后台的数据
userId:this.userId,
token:this.token,
})
}).then((response) =>{
console.log(response) //请求成功
}).catch((error) =>
console.log(error) //请求失败
})
}
}
</script>
- 拼接参数(第二种请求方式)
axios.get(地址?参数=值&参数=值.....)
.then(请求成功的回调).catch(请求失败的回调)
- parmas对象传递参数
axios.get(地址,{
params:{参数}
}).then(请求成功的回调).catch(请求失败的回调)
- 使用axios发起post方式请求
- post方式请求:参数的格式为对象
axios.post(地址,{参数})
.then(请求成功的回调)
.catch(请求失败的回调)
axios的简易封装
- axios.create()实现axios封装
作用:可以使用自定义配置新建一个 axios 实例
// 引入axios
import axios from "axios"
export default axios.create({
baseURL: 'https://www.xxx.cn'
})
// 暴露
export default axios
- 使用defaults配置axios的默认值
可以通过 axios.defaults来axios发送请求时的配置
import axios from 'axios'
// 配置defaults, 也可以使用axios.creat()
axios.defaults.baseURL = 'https://www.xxx.cn'
// 暴露
export default axios
使用axios()实现具体请求的封装
// 专门处理user模块的请求
import myaxios from "../utils/request";
// 1. 用户登录
export const userLogin = function (data) {
// 返回的结果是promise 他就像之前的get()|post() 一样
myaxios.axios({
method: 'post',
url: '/login',
data
})
}
也可以同时发起多个请求
创建一个实例
你可以创建一个拥有通用配置的axios实例
axios.creat([config])
var instance = axios.create({
baseURL: 'https://some-domain.com/api/',
timeout: 1000,
headers: {'X-Custom-Header': 'foobar'}
});
更多内容待更新~~~
本文介绍了如何在前端项目中使用axios进行HTTP请求。首先讲解了通过npm安装axios和vue-axios,接着展示了如何导入并使用axios发起GET请求,包括无参和带参请求。然后提到了POST方式请求的实现,以及通过axios.create()进行实例封装和设置默认配置的方法。最后提到可以发起多个并发请求,并预告了更多内容即将更新。
&spm=1001.2101.3001.5002&articleId=123441699&d=1&t=3&u=17fcf6074348444dbae20cb96b736796)
1986

被折叠的 条评论
为什么被折叠?



