Axios安装
cnpm install --save axios
post请求需要用到的:
cnpm install --save querystring(用来转换格式的)
引入
一般是全局引入,在main.js中引入
全局引入后的get和post方式使用
get请求方式
post请求方式
先引入:
**
把axios挂载到全局
1、在main.js中引入axios
import axios, { axios } from "axios";
//将axios挂载到全局
const app = createApp(App)
App.config.globalProperties.$axios = axios
app.mount('#app')
请求方式写法变成了这个
this.$axios.get('')
.then(res => {
})
this.$axios.post('',querystring.stringify({
id:''
})).then(res => {
})
axios网络请求封装
1、先安装axios和querystring
2、在src文件夹中创建一个文件夹utils,在下面创建一个请求
在里面写入
import { axios } from "axios";
import { qr } from "querystring";
//参考文档 https://www.kancloud.cn/yunye/axios/234845
//错误的监听
const errorHandle = (status, info) => {
switch (status) {
case 400:
console.log("语义有误");
break;
case 401:
console.log("服务器认证失败");
break;
case 403:
console.log("服务器拒绝访问");
break;
case 404:
console.log("地址错误");
break;
case 500:
console.log("服务器遇到意外");
break;
case 502:
console.log("服务器无响应");
break;
default:
console.log(info);
break;
}
}
const instance = axios.create({
//网络请求的公共配置
timeout: 5000
})
//拦截器最常用的
//发送数据之前
instance.interceptors.request.use(
config => {
if (config.methods === 'post') {
conofig.data = qr.stringify(config.data)
}
//config:包含网络请求的所有信息
return config
},
error => {
return Promise.reject(error)
}
)
//获取数据之前
instance.interceptors.request.use(
reponse => {
return reponse.status === 200 ? Promise.resolve(response) : Promise.reject(response)
},
error => {
const { reponse } = error
//错误的处理才是我们最需要关注的
errorHandle(response.status,reponse.info)
}
)
export default instance
以上就全部封装完成了
在src下面创建一个api文件夹,下面创建两个js文件
在path中写
const base = {
baseUrl: "",
//写一个公共网址
chengpin:""
//路径有区别
}
export default base;
在index中写
import { axios } from "../utils/rq";
import { path } from "./path";
const api = {
//成品详情地址
//这个只是get方式的请求,post还需要另外写
getChengPin() {
return axios.get(path.baseUrl + path.chengpin)
}
}
export default api;
**
使用方法
跨域
解决跨域的方案
1、后台解决:cors
2、前台解决:proxy
devServer: {
proxy: {
'/api': {
target: 'http://baidu.com/',//产生跨域的地址 :80是默认的。不用写
changeOrigin: true
}
}
}
改成下面这样
使用方法:用地址的时候把前面的地址给取消掉就可以了(红线的)
!!!!设置完后要重启服务器