接口测试工具Apifox 基础篇:配置环境
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
| $.ajax({ url:"", timeout:8000, type:"POST", dataType:"json", data:{name:"大名",age:"23"}, success:function(data,status,xhr){
}, error:function(xhr,status,error){ $(".success").hide(); $(".maskBg").hide(); if(xhr.status === 0){ if(status === "timeout"){ app.alert("网络不给力,请检查网络设置"); } }else if(xhr.status.toString().charAt(0) === "4"){ app.alert("客户端出错,请重新操作:" + xhr.status); }else if(xhr.status.toString().charAt(0) == "5"){ app.alert("服务端出错,请联系网站管理员!错误代码:" + xhr.status); } } })
|
axios 的简单封装
axios中文文档|axios中文网
axios:基于promise的http库
1.首先引入 axios
1
| import axios from 'axios'
|
2.创建一个实例
1 2 3 4
| const api = axios.create({ baseURL: '', timeout: 3000 })
|
3.request拦截器
1 2 3 4 5 6 7 8 9 10
|
api.interceptors.request.use(config => { return config }, err => { Promise.reject(err) })
|
4.response拦截器
1 2 3 4 5 6 7 8 9
| api.interceptors.response.use(res => { console.log(res) return Promise.resolve(res) }, err => { Promise.reject(err) })
|
7.暴漏出去
封装接口
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
| import api from '../index.js';
下面是简写的形式
export const getXXX = (params) => api.get(`/apigb/v1/component`, { params})
export const postXXX = (params) => api.post(`/apigb/v1/component/update-info`, params)
export const xxxx = (params) => api({ url: '', method: 'post', params: params })
|
- 同步和异步
- XMLHttpRequest对象创建
- HTTP请求
- XMLHttpRequest发送请求
- XMLHttpRequest取得响应
fetch返回promise对象
async和await
作用:简化promise对象的使用:不用再使用then()来指定成功/失败的回调函数,以同步编码(没有回调函数)方式实现异步流程
哪里写await?
在返回promise的表达式左侧写await:不想要promise,想要promise异步执行的成功的value数据
哪里写async?
await所在函数(最近的)定义的左侧写async
跨域-代理
配置跨域的方式:
服务端最常用的两种:
- cors配置跨域
- nginx反向代理处理跨域
前端的代理,只能本地调试使用
Vite搭建的Vue项目,在本地使用代理解决了跨域问题,打包到线上的跨域问题怎么解决?
跨域的地址不属于自己服务器的连接,是别人服务器的连接
——服务器要配置地址(需要服务端来处理)