一、axios——vue数据请求插件
用来请求
cross
跨域的 api 接口的插件。
1、axios的使用
1、安装axios:
cnpm install --save-dev axios
2、引入并使用
全局引入并关联、使用
main.js里边:
import Axios from 'axios'
Vue.prototype.$axios=Axios;
组件里边使用:
//组件挂载完成之后进行数据请求
mounted(){
this.$axios
.get("") //请求路径
.then((res) => {
console.log(res); //返回的数据
})
.catch((error) => {
console.log(error);
})
.finally(() => {
console.log("最后处理");
});
}
也可以发送post请求并传参,具体用法参考 npmjs 官网。
2、axios 拦截器
可以通过封装的axios
拦截器对ajax
请求和响应做相应的处理,统一处理错误及配置请求信息。
axios
拦截器有两种:请求拦截器 和 响应拦截器。
具体操作如下:
在src根目录下新建文件axios.js,内容如下:
// 封装axios 拦截器
//引入axios
import Axios from 'axios';
//设置默认的host
Axios.defaults.baseURL = "http://www.maodou.com:8080";
//设置请求拦截器
Axios.interceptors.request.use((config) => {
console.log(config); //ajax请求配置
//...在发送请求之前做些什么
return config;
}, (error) => {
//...对请求错误做些什么
return Promise.reject(error);
});
//设置响应拦截器
Axios.interceptors.response.use((response) => {
console.log(response);
//可以对数据做处理
return response;
}, (error) => {
//对响应错误做些什么
return Promise.reject(error);
});
在main.js中进行引入:
//全局引入
import Axios from 'axios'
import './Axios/axios';
Vue.prototype.$axios=Axios;
在组件中使用:
使用的时候 url 写半路径,因为请求拦截器里边已经设置过 baseURL。
this.$axios({
method: "get",
url: "/user",
})
.then((res) => {
console.log(res);
})
.catch((error) => {
console.log(error);
});
二、fetch-jsonp
用来请求 jsonp 跨域的 api 接口 的插件。
JSONP only supports GET method, same as fetch-jsonp.
1、fetch-jsonp 的使用
1、安装fetch-jsonp
cnpm install --save-dev fetch-jsonp
2、全局引入 fetch-jsonp,并关联到vue原型上:
//引入fetch-jsonp
import Fetch from 'fetch-jsonp'
Vue.prototype.$fetch=Fetch;
3、在组件中使用
this.$fetch("/", {
jsonpCallback: "getData", //设置jsonp的回调函数名称
timeout: 2000,
})
.then((res) => {
return res.json(); //第一个then是固定的
})
.then((res) => {
console.log(res); //返回的数据
})
.catch((error) => {
console.log(error); //抓异常
});
2、fetch 拦截器
axios有自己的拦截器方法,可以直接调方法;fetch-jsonp 没有,可以通过类来封装。