Axios在Vue2 中使用方法
·
axios配置步骤:
- 安装axios:npm instal axios -S (官网:https://www.axios-http.cn/)
- 在src下新建目录utils,在utils下新建request.js文件
- 导入axios:import axios from "axios";
- 1)创建一个实例 2)request拦截器 3)response拦截器 4)把实例暴露出去
//request.js
import axios from "axios";
const request = axios.create({
baseURL: 'http://localhost:9090',
timeout: 5000
})
// request拦截器
// 可以自请求发送前对请求做一些处理
//比如统一加token,对请求参数统一加密
request.interceptors.request.use(config => {
config.headers['Content-Type'] = 'application/json;charset=utf-8'
// config.headers['token'] = user.token //设置请求头
return config
}, error => {
return Promise.reject(error)
})
// response拦截器
// 可以在接口响应后统一处理结果
request.interceptors.response.use(response=>{
let res = response.data
if (response.config.responseType === 'blod'){ //如果是返回的文件
return res
}
if(typeof res === 'string'){ //兼容服务端返回的字符串数据
res = res ? JSON.parse(res) : res
}
return res
},error =>{
console.log('err'+ error)
return Promise.reject(error)
})
export default request
使用:
//main.js
import request from "@/utils/request";
Vue.prototype.request = request
// Home.vue
<script>
import request from '../utils/request';
export default {
name: 'Home',
data() {
return {}
},
created() {
this.load() //请求分页查询数据
},
methods: {
load() { //请求分页查询数据
request.get("/user").then(res => {
console.log(res)
})
},
}
}
</script>
报错:

经查找,发现是main.js中多写了个括号
Vue.prototype.request = request() //错误
Vue.prototype.request = request //正确
更多推荐



所有评论(0)