目录
1.第一步，在src目录下，新建utils/request.js文件，文件内容如下：
2.1 在src目录下新建api/index.js文件，文件内容如下：
axios以data，params，headers传参方式的区别
为什么封装axios
axios大家都非常的清楚，一个既可以用于客户端或者服务端发送http请求的库。在实际开发项目中，网络请求基本上使用axios网络请求工具，但是单纯的使用像
axios.get('http://xxxxx.com')来请求接口，随着项目越来越大，页面越来越多，功能越来越完善，我们势必会写大量的axios请求，每次都这么写，费时费力，也不方便统一管理，所以，需要将axios进行二次封装，以达到我们开发项目的时候省时、省力、省心。
这是封装之前的axios的使用办法，如果后续修改域名会很麻烦：
axios.get('https://api.apiopen.top/api/getImages?id=',param).then((res) => {
this.shuju=res.result.list;
console.log(this.shuju)
}); 1.第一步，在src目录下，新建utils/request.js文件，文件内容如下：
//首先引入axios
import axios from 'axios'
//然后通过create方法来创建一个请求服务
//然后create方法内有一些配置项，比如接口域名`baseURL`、接口请求超时时间`timeout`
//接口url`url`
//接口请求方式`method`等等，需要我们按需传入
// create an axios instance
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_URL, // 完整的api地址 = 接口域名+ 接口路径
// 完整url = 服务根url + 请求url拼接的； 服务根url来源于全局变量；请求url来源于api函数的url参数。
// withCredentials: true, // 跨域请求时发送cookie
timeout: 5000 // 请求超时时间 5s，请求超时
})
//下面会定义两个拦截器，分别是 `请求拦截器`，`响应拦截器`
//`请求拦截器`是前端请求后端接口前处理的一些逻辑，比如开启loading，配置header请求头等等
//`响应拦截器`就是后端响应我们前端，返回回来的数据，比如我们可以在这响应拦截器内拿到status Code
//拿到后端接口返回的code，关闭loading、根据code码处理一些详细的逻辑等等一系列操作
//request interceptor 请求拦截器
service.interceptors.request.use(
config => {
// do something before request is sent。在发送请求之前做一些事情
// 请求之前的设置
// 添加请求头信息，可以根据需要自行选择，也可以不要
// 例如请求头加入“tken”键
config.headers['token'] = "xxxxxx"
return config
},
error => {
// do something with request error// 请求错误时
console.log(error) // for debug
return Promise.reject(error)
}
)
// response interceptor 响应拦截器
service.interceptors.response.use(
response => {
const res = response.data
// if the custom code is not 20000, it is judged as an error.// 在这里限定了返回的必须要有返回码——code键，且返回码不为200时视为请求结果错误的
if (res.code !== 200) {
// 这是错误信息提示
// 如果返回值有键-message，则错误信息是自定义的返回信息值，否则只提示'Error'
alert(res.message || 'Error')
// 你也可以加入其它一些返回码的判断，也可以根据某些返回码跳转到某些页面
return Promise.reject(new Error(res.message || 'Error'))
} else {
return res
}
},
error => {
console.log('err' + error) // for debug
alert(res.message || 'Error')
return Promise.reject(error)
}
)
// 最后暴露我们声明的 service 服务
export default service2. api的封装与使用
- api请求方法，也是要做一个封装的，封装流程如下
-
2.1 在
src目录下新建api/index.js文件，文件内容如下：
import request from '../utils/request';
//登录接口，post方式传参用data
export function login(data) {
return request({
url: '/api/login',
method: 'post',
data
})
}
//获取xx列表接口，get方式传参用params
export function getList(params) {
return request({
url: '/api/getList',
method: 'get',
params
})
}
axios以data，params，headers传参方式的区别
vue路由传参有两种方式，分别是
query和params；query是明文，params是隐藏的；
1.params和data有什么不同，总结：
- params和data的区别，即get和post请求的区别，HTTP协议的基础知识
- get请求参数是带在url上的，必须使用params
- post请求是body data使用data
params是添加到url的请求字符串中的，一般用于get请求。
params的对象参数名和值，axios的源码会把参数和值，拼接在ulr？后面拼接给后台（query查询字符串）
data是添加到请求体（body）中的， 一般用于post请求。
data的对象参数和值，axios源码会把参数和值，拼接·在请求体（body参数）
2.两种请求方式：
1）get 请求
axios({
method: 'GET',
url: 'xxxxx',
params: param,
})
或者
axios({
method: 'GET',
url: '/xxx?message=' + msg,
})
get 请求不管使用哪种方式，最后的参数都会放到路径上。
使用param 只是axios帮你把这个参数进行了序列化，并且拼接在 url上面。
2）post 请求
axios({
method: 'POST',
url: '/xxxxx',
data: param,
})
或者
axios({
method: 'POST',
url: '/xxxxx',
params: param,
})
data的形式
案例代码如下：
method: 'POST',
url: '/xxxxx',
data: param,
})
使用data传递的是一个对象，在浏览器--控制台中看到的话是 request payload
参数的view sources如下：
params的形式
这个是一个对象形式传递的，案例代码如下：
axios({
method: 'POST',
url: '/xxxxx',
params: param,
})
浏览器结果分析 ：
查看view sourcer 如下：
3）headers
将传递的参数挂载到请求头上
import store from '@/store'
// 获取用户信息接口
export const getUserInfoAPI = function() {
return request({
url: '/my/userinfo'
// method不写默认为‘get’方法请求
// 传递给后台：params（查询字符串query），data（请求体body），headers（请求头）
headers: {
// this.$store.state.token这里的this不是组件对象，不能用this.$store拿到store对象
Authorization: store.state.token
}
})
}
细节可以参考这篇文章：axios 传递参数的方式(data 与 params 的区别)_twinkle||cll的博客-CSDN博客_axios params
-
2.2 使用封装好的api
- 在需要的页面，比如我们的登录页面需要调用登录接口，我们就要这样用
- 页面中使用时，引入login方法，记住方法要用{}，方法里的{username:'admin',password:"123456"}是我要的参数
//首先第一步要用import导入进来我们的登录接口
import { login } from '../api/index'
//然后直接调用login方法
login({username:'admin',password:"123456"}).then(res=>{
console.log(res);
})- 在api下面新建api.index.js文件，将所有接口引用入口
- main.js文件全局挂载api（httpApi是自命名的）
- 页面接口调用
