react 封装axios,解决跨域
1. 安装axios依赖npm install axios2. util目录下新建https.js/*** 网络请求配置*/import axios from "axios";axios.defaults.timeout = 100000;/*** http request 拦截器*/axios.interceptors.request.use((config) => {config.dat
·
1. 安装axios依赖
npm install axios
2. util目录下新建https.js
/**
* 网络请求配置
*/
import axios from "axios";
axios.defaults.timeout = 100000;
let isDev = process.env.NODE_ENV;
if(isDev === 'development') {
axios.default.baseURL = '/api'
}
/**
* http request 拦截器
*/
axios.interceptors.request.use(
(config) => {
config.data = JSON.stringify(config.data);
config.headers = {
"Content-Type": "application/json",
};
return config;
},
(error) => {
return Promise.reject(error);
}
);
/**
* http response 拦截器
*/
axios.interceptors.response.use(
(response) => {
if (response.data.errCode === 2) {
console.log("过期");
}
return response;
},
(error) => {
console.log("请求出错:", error);
}
);
/**
* 封装get方法
* @param url 请求url
* @param params 请求参数
* @returns {Promise}
*/
export function get(url, params = {}) {
return new Promise((resolve, reject) => {
axios.get(url, {
params: params,
}).then((response) => {
landing(url, params, response.data);
resolve(response.data);
})
.catch((error) => {
reject(error);
});
});
}
/**
* 封装post请求
* @param url
* @param data
* @returns {Promise}
*/
export function post(url, data) {
return new Promise((resolve, reject) => {
axios.post(url, data).then(
(response) => {
//关闭进度条
resolve(response.data);
},
(err) => {
reject(err);
}
);
});
}
/**
* 封装patch请求
* @param url
* @param data
* @returns {Promise}
*/
export function patch(url, data = {}) {
return new Promise((resolve, reject) => {
axios.patch(url, data).then(
(response) => {
resolve(response.data);
},
(err) => {
msag(err);
reject(err);
}
);
});
}
/**
* 封装put请求
* @param url
* @param data
* @returns {Promise}
*/
export function put(url, data = {}) {
return new Promise((resolve, reject) => {
axios.put(url, data).then(
(response) => {
resolve(response.data);
},
(err) => {
msag(err);
reject(err);
}
);
});
}
//统一接口处理,返回数据
export default function (fecth, url, param) {
let _data = "";
return new Promise((resolve, reject) => {
switch (fecth) {
case "get":
console.log("begin a get request,and url:", url);
get(url, param)
.then(function (response) {
resolve(response);
})
.catch(function (error) {
console.log("get request GET failed.", error);
reject(error);
});
break;
case "post":
post(url, param)
.then(function (response) {
resolve(response);
})
.catch(function (error) {
console.log("get request POST failed.", error);
reject(error);
});
break;
default:
break;
}
});
}
//失败提示
function msag(err) {
if (err && err.response) {
switch (err.response.status) {
case 400:
alert(err.response.data.error.details);
break;
case 401:
alert("未授权,请登录");
break;
case 403:
alert("拒绝访问");
break;
case 404:
alert("请求地址出错");
break;
case 408:
alert("请求超时");
break;
case 500:
alert("服务器内部错误");
break;
case 501:
alert("服务未实现");
break;
case 502:
alert("网关错误");
break;
case 503:
alert("服务不可用");
break;
case 504:
alert("网关超时");
break;
case 505:
alert("HTTP版本不受支持");
break;
default:
}
}
}
/**
* 查看返回的数据
* @param url
* @param params
* @param data
*/
function landing(url, params, data) {
if (data.code === -1) {
}
}
3. util目录下新建request.js文件
公共axios函数
这里对接收的三个参数做了柯里化
methods和url一般不会改变,多以将这两个参数封装到一起
data是请求的参数,经常会有改变,单独接收
import http from './http';
/**
* 公共axios函数
* 这里对接收的三个参数做了柯里化
* methods和url一般不会改变,多以将这两个参数封装到一起
* data是请求的参数,经常会有改变,单独接收
* @param {String} methods 请求方式
* @param {String} url 请求路径
* @param {Object} data 接口入参
*/
function localAxios(methods, url){
return function (data) {
return new Promise((resolve, reject) => {
http(methods,url, data).then(res => {
resolve (res);
},error => {
console.log("网络异常~",error);
reject(error)
})
})
}
}
export {
localAxios
}
4. util目录下创建apis目录,用于存放定义的接口,apis目录下任意js内代码
这里只传递了methods和url两个参数,data参数放在具体逻辑代码中传递
这里要注意,url前有个“/api”,这个是多加上的,这个前缀要和第六步中的正则匹配一致
import { localAxios } from '../request'
export let birthEight = localAxios('get', '/birthEight/query')
5. 逻辑代码调用
import { birthEight } from '../util/apis/test'
let params = {
year: '',
month: '',
day: '',
hour: '',
key: ''
}
birthEight(params)
.then(res => {
console.log(res);
})
6. 跨域解决
mode_modules目录下找到webpackDevServer.config.js文件
在return 后的对象内添加下面代码
proxy: {
//axios跨域改造
'/api': {
target:'http://apis.juhe.cn', // 你请求的第三方接口
changeOrigin:true, // 在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
pathRewrite:{ // 路径重写,
'^/api': '' // 替换target中的请求地址,也就是说/api=/target,请求target这个地址的时候直接写成/api即可。
}
}
},
7. 最后,我的项目目录
更多推荐
已为社区贡献1条内容
所有评论(0)