标签：axios resolve err url res request api data
1. 封装uni.request
const BASE_URL = ' '
export const myRequest = (options) => {
return new Promise(resolve, reject){
uni.request({
url : BASE_URL + options.url,
header: {
'content-type': 'application/x-www-form-urlencoded'
},
method : options.method || 'GET',
data : options.data || {},
success :(res) => {
if(res.data.status !== 0){
return uni.showToast({
title: '获取数据失败!'
})
}
resolve(res)
},
fail: (err) => {
reject(err)
}
})
}
}
//在main.js里 vue原型中全局注册
this.myRequest()调用
2. 封装wx.request()
与uni.request()大同小异
搬运
原链接http://t.csdn.cn/Vs6Uo
//env.js //设置公共访问的url，即环境变量 module.exports = { // 开发环境 dev: { baseUrl: 'https://localhost:3000' }, // 测试环境 test: { baseUrl: 'https://localhost:4000' }, // 线上环境 prod: { baseUrl: 'https://localhost:5000' } } //request.js // 引入env中的url const { baseUrl } = require('./env.js').test //测试环境 // 专属域名 module.exports = { request: (url, method = 'POST', data = {}) => { // console.log(baseUrl) let _url = `${baseUrl}${url}` return new Promise((resolve, reject) => { wx.showLoading({ title:"正在加载" }) wx.request({ url: _url, //请求路径 data: data, //请求参数 method: method, //请求方法get和post header: { 'content-type': 'application/x-www-form-urlencoded' //请求头 }, success: (res) => { // console.log(res) if(res.data.ret == 200){ wx.hideLoading() resolve(res.data) }else{ wx.showToast({ title: '数据请求失败', }) } fail:(err)=>{ reject(err.data) } } }) }) } } //api.js const { request } = require('./request') module.exports = { getList: (data) => { return request('/GetList','get',data); //第一个参数为地址，第二个参数为请求方式，第三个参数为传递的参数 } }
3. 封装axios
引用http://t.csdn.cn/Wm2oB
//封装代码http.js
/*
* @Author: Mr Dong
* @Date: 2022-03-08
* @LastEditTime: 2022-03-09
* @LastEditors: Mr Dong
*/
import Vue from 'vue';
import axios from 'axios';
import qs from 'querystring'//序列化参数用
//决定是否过滤URL中的/api
let isFilterApi = !(process.env.NODE_ENV === 'development'); //线上环境还是本地环境,过滤/api
let _axios = axios.create({
baseURL: '',
withCredentials:true,//跨域请求时开启请求头可以携带cookie等信息
timeout: 300000, //超时设置
transformRequest: [function (data) {
return data
}],//处理请求格式用（这里不能少，否则content-type设置成multipart/form-data无效，具体原因未知）
transformResponse: [function (data) {
return data
}]//处理返回格式用例如_axios.defaults.responseType = 'blob';
})
// 请求拦截器（如果不单独封装成多种单独的请求格式，判断将写在请求拦截中，自行考虑选用方式，个人觉得判断太多不如单独写）
_axios.interceptors.request.use(
(config) => {
return config
}, // 发送请求前做的配置
error => { //请求错误处理
Promise.reject(error)
}
);
// 响应拦截器
_axios.interceptors.response.use(
(response) => response,
(error) => Promise.reject(error), // 对请求错误做点什么
);
_axios.defaults.headers.common['Token'] = '1111'//token设置
//过滤/api
function filterApi(url) {
url = isFilterApi? url:'/api'+url//跨域代理,开发环境自动添加'/api'
return url
}
//通用请求错误提示
function _error(err){
switch (Number(err.response.status)) {//这里字段根据自己项目修改
case 400://一般是前台参数格式有问题
Vue.prototype.$message({
type: 'warning',
showClose: true,
message: '请求无效！'
});
break;
case 404:
Vue.prototype.$message({
type: 'error',
showClose: true,
message: '未找到该接口'
});
break;
case 500:
Vue.prototype.$message({
type: 'error',
showClose: true,
message: '服务器异常',
});
break;
}
}
//json格式post
export const JsonPost = (url, params) => new Promise((resolve, reject) => {
url = filterApi(url)
_axios.defaults.headers.post['Content-Type'] = 'application/json; charset=UTF-8';
delete _axios.defaults.responseType
_axios.post(url, JSON.stringify(params)).then((res) => {
//resolve(res.data);
resolve(JSON.parse(res.data));
}).catch((err) => {
_error(err)//通用错误提示
reject(err.data);//特定界面错误处理
});
});
//键值对格式post
export const FormDataPost = (url, params) => new Promise((resolve, reject) => {
url = filterApi(url)
_axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=utf-8';
delete _axios.defaults.responseType
_axios.post(url, qs.stringify(params)).then((res) => {
//resolve(res.data);
resolve(JSON.parse(res.data));
}).catch((err) => {
_error(err)//通用错误提示
reject(err.data);//特定界面错误处理
});
});
//文件格式post，上传图片，文件等
export const FilePost = (url, params) => new Promise((resolve, reject) => {
url = filterApi(url)
_axios.defaults.headers.post['Content-Type'] = 'multipart/form-data';
delete _axios.defaults.responseType
_axios.post(url, params).then((res) => {
resolve(res.data);
}).catch((err) => {
_error(err)//通用错误提示
reject(err.data);//特定界面错误处理
});
});
//返回格式为文件流，如导出excle文件流。
export const BlobPost = (url, params) => new Promise((resolve, reject) => {
url = filterApi(url)
_axios.defaults.headers.post['Content-Type'] = 'application/json; charset=UTF-8';
_axios.defaults.responseType = 'blob';
_axios.post(url, JSON.stringify(params)).then((res) => {
resolve(res.data);
}).catch((err) => {
_error(err)//通用错误提示
reject(err.data);//特定界面错误处理
});
});
//get请求，这里注意和axios.get和axios.post请求参数格式的区别写法post{},get{params:{}}
export const get = (url, params) => new Promise((resolve, reject) => {
url = filterApi(url)
delete _axios.defaults.responseType
_axios.get(url, { params }).then((res) => {
//resolve(res.data);
resolve(JSON.parse(res.data));
}).catch((err) => {
_error(err)//通用错误提示
reject(err.data);//特定界面错误处理
});
});
//第一种写法
//axios({method:'post',url:'',data:{}}
//axios({method:'get',url:'',params:{}})
//第二种写法，这里用的是第二种
//axios.get(url,{params:{}})
//axios.post(url,data:{})
//第三种写法不区分参数格式只用post格式，单独手动处理get的url，即手动序列化参数拼接到url后面。不提倡，序列化放法可采用qs.stringify()或者自己写方法
标签：axios,resolve,err,url,res,request,api,data 来源： https://www.cnblogs.com/gyh907368/p/16548097.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。