【vue】axios请求封装,二次封装
【vue】axios请求封装,二次封装
·
前言
axios请求,响应
主要用于实现AJAX异步通信功能;axios可以在浏览器中发送XMLHttpRequests请求,可以在nodejs中发送http请求,还可以拦截请求和响应、转换请求和响应数据
步骤一,安装
npm install --save axios vue-axios
步骤二,main.js入口文件
//axios请求注册
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
步骤三,请求接口方式
//页面中直接使用的方式
this.$http.get('http:xxxx/xxx').then((response) => {
console.log(response.data);
});
Vue.axios.get(api).then((response) => {
console.log(response.data)
})
this.axios.get(api).then((response) => {
console.log(response.data)
})
Get请求
const axios = require('axios');
// 向给定ID的用户发起请求
axios.get('http/xxxx')
.then(function (response) {
// 处理成功情况
console.log(response);
})
.catch(function (error) {
// 处理错误情况
console.log(error);
})
.then(function () {
// 总是会执行
});
//注意注意:因为params是添加到url的请求字符串中的,用于get请求。
//或者
axios.get('http/xxxx', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.then(function () {
// 总是会执行
});
get请求-效果图,params是添加到url的请求字符串中的
POST请求
// 发起一个post请求
axios({
method: 'post',//请求方式
url: 'http/xxx',//请求路径
data: {//请求参数
firstName: 'Fred',
lastName: 'Flintstone'
}
});
post请求-效果图,而data是添加到请求体(body)中的
请求配置
配置各项参数效果和作用
const axios = require('axios');
//qs是在修改将url中的参数转为对象;将对象转为url参数形式
const qs = require('qs');
axios({
method: 'post', //请求方式
url: 'sys/industry/querylist', //请求路径
data: { //请求参数
firstName: 'Fred',
lastName: 'Flintstone'
},
// `baseURL` 将自动加在 `url` 前面,除非 `url` 是一个绝对 URL。
// 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
baseURL: 'http://xxxxxx/epidemic_prevention/',
//transformRequest 对发送的 data 进行任意转换处理,允许在向服务器发送前,修改请求数据
transformRequest: [function (data, headers) {
data.max = "新增"
return qs.stringify(data);
}],
// `transformResponse` 在传递给 then/catch 前,允许修改响应数据,使用场景:将响应的数据剥离出一层res,最终return res.data。
transformResponse: [function (data) {
// 对接收的 data 进行任意转换处理
return data;
}],
// 自定义请求头
headers: {'X-Requested-With': 'XMLHttpRequest'},
// 必须是一个简单对象或 URLSearchParams 对象
params: {
ID: 12345
},
// `timeout` 指定请求超时的毫秒数。
// 如果请求时间超过 `timeout` 的值,则请求会被中断
timeout: 1000, // 默认值是 `0` (永不超时)
});
transformRequestt-效果图
使用自定义请求头headers-效果图,通常传个token
params效果图,用于给地址后面传递参数-图示
qs库的引入(使用到的时候再引)
对发送或者收到的 data 进行任意转换处理(常用于 post请求的data数据进行加密处理)
transformRequest: [function (data, headers) {
return qs.stringify(data);
}],
// 下面常见几种数组使用方式
qs.stringify({ a: ['b', 'c', 'd'] });
// 'a[0]=b&a[1]=c&a[2]=d'
qs.stringify({ a: ['b', 'c', 'd'] }, { indices: false });
// 'a=b&a=c&a=d'
qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'indices' })
// 'a[0]=b&a[1]=c'
qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'brackets' })
// 'a[]=b&a[]=c'
qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'repeat' })
// 'a=b&a=c'
注意:需要注意的是,JSON中同样存在stringify方法,但是两者之间的区别是很明显的
//qs库的引入
//npm install qs命令进行安装
//页面中使用
import qs from 'qs';
let url ={
firstName: 'Fred',
lastName: 'Flintstone'
}
// 转为url参数形式
console.log(qs.stringify(data))
// 转为对象
console.log(qs.parse(url));
正常业务流程-请求封装
新建 request.js
import axios from 'axios'
// 域名
export const instance = axios.create({
baseURL: 'http://xxxxx.cn',
// timeout: 1000,
})
// 添加请求拦截器,一般加token时使用
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器,一般脱皮处理
instance.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response.data;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
// 请求工具函数
export default (url, method, submitData) => {
// 负责发请求:请求地址,请求方式,提交的数据
return instance({
url,
method,
// 1. 如果是get请求 需要使用params来传递submitData ?a=10&c=10
// 2. 如果不是get请求 需要使用data来传递submitData 请求体传参
// [] 设置一个动态的key, 写js表达式,js表达式的执行结果当作KEY
// method参数:get,Get,GET 转换成小写再来判断
// 在对象,['params']:submitData ===== params:submitData 这样理解
[method.toLowerCase() === 'get' ? 'params' : 'data']: submitData,
// 自定义请求头
headers: {
'token': localStorage.getItem("token") || ""
},
})
}
二次封装
新建 api.js
import request from '@/utils/request'
// 标题分类,homeHeadCategory为接口名
export const Index = (data) => {
return request('/api/index/index', 'get',data)
}
页面使用
//脱皮处理,就是让返回的数据少一层data
methods:{
//假如上面没写响应拦截器,还想脱皮处理,就是让返回的数据少一层data
//解决方法:{data:res}解决
async Index() {
try {
const {data:res} = await Index();
console.log(res.data.case_list);
} catch (err) {
uni.showToast({
title: err,
icon: "none",
});
}
},
//如果写了响应拦截器,我们已经在响应拦截器里面做了脱皮,这里就直接用
async Index() {
try {
const res = await Index();
console.log(res.data.case_list);
} catch (err) {
this.$message.error({
title: "获取失败",
message: "获取失败",
type: "none",
duration: 2000,
});
}
},
}
更多推荐
已为社区贡献8条内容
所有评论(0)