winney

It is never too old to learn.

0%
winney

异步处理-笔记

发表于 更新于 分类于 ，

接口测试工具Apifox 基础篇：配置环境

jQuery.ajax
AJAX教程 W3school 
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 // 请求超时时间 这里的意思是当请求时间超过5秒还未取得结果时 提示用户请求超时
})

3.request拦截器

1
2
3
4
5
6
7
8
9
10
// 请求相关处理 请求拦截 在请求拦截中可以补充请求相关的配置
// interceptors axios的拦截器对象
api.interceptors.request.use(config => {
     // config 请求的所有信息
    // console.log(config);
    return config // 将配置完成的config对象返回出去 如果不返回 请求讲不会进行
}, err => {
    // 请求发生错误时的相关处理 抛出错误
   Promise.reject(err)
})

4.response拦截器

1
2
3
4
5
6
7
8
9
api.interceptors.response.use(res => {
    // 我们一般在这里处理，请求成功后的错误状态码 例如状态码是500，404，403
    // res 是所有相应的信息
    console.log(res)
   return Promise.resolve(res)
}, err => {
    // 服务器响应发生错误时的处理
    Promise.reject(err)
})

7.暴漏出去

1
export default api

封装接口

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import api from '../index.js';

下面是简写的形式
// getXXX 自定义的接口名字
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', // 请求方式
        // data: params, // (一般post请求，我们习惯使用 data属性来传参)
        params: params //(一般get请求，我们习惯使用params属性来传参）
        // 注意：data，和 params 两个属性传参使用，并不是固定的，也可以调换使用。
})
  1. 同步和异步
  2. XMLHttpRequest对象创建
  3. HTTP请求
  4. XMLHttpRequest发送请求
  5. XMLHttpRequest取得响应

Fetch API

fetch返回promise对象

async和await

作用：简化promise对象的使用：不用再使用then()来指定成功/失败的回调函数，以同步编码(没有回调函数)方式实现异步流程

哪里写await?

在返回promise的表达式左侧写await：不想要promise，想要promise异步执行的成功的value数据

哪里写async?

await所在函数(最近的)定义的左侧写async

跨域-代理

配置跨域的方式：

服务端最常用的两种：

  1. cors配置跨域
  2. nginx反向代理处理跨域

前端的代理，只能本地调试使用

Vite搭建的Vue项目，在本地使用代理解决了跨域问题，打包到线上的跨域问题怎么解决？

跨域的地址不属于自己服务器的连接，是别人服务器的连接

——服务器要配置地址（需要服务端来处理）