vue--axios异步网络请求技术
import Promise如下
Promise：
https://blog.csdn.net/weixin_41888813/article/details/82882375?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165570749716781483794153%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=165570749716781483794153&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_positive~default-2-82882375-null-null.142^v17^pc_search_result_control_group,157^v15^new_3&utm_term=Promise&spm=1018.2226.3001.4187
Promise API
Promise构造函数: Promise (excutor) {}
excutor函数: 同步执行 (resolve, reject) => {}
resolve函数: 内部定义成功时我们调用的函数 value => {}
reject函数: 内部定义失败时我们调用的函数 reason => {}
说明: excutor会在Promise内部立即同步回调,异步操作在执行器中执行
Promise.prototype.then方法: (onResolved, onRejected) => {}
onResolved函数: 成功的回调函数 (value) => {}
onRejected函数: 失败的回调函数 (reason) => {}
说明: 指定用于得到成功value的成功回调和用于得到失败reason的失败回调
返回一个新的promise对象
Promise.prototype.catch方法: (onRejected) => {}
onRejected函数: 失败的回调函数 (reason) => {}
说明: then()的语法糖, 相当于: then(undefined, onRejected)
Promise.resolve方法: (value) => {}
value: 成功的数据或promise对象
说明: 返回一个成功/失败的promise对象
Promise.reject方法: (reason) => {}
reason: 失败的原因
说明: 返回一个失败的promise对象
Promise.all方法: (promises) => {}
promises: 包含n个promise的数组
说明: 返回一个新的promise, 只有所有的promise都成功才成功, 只要有一个失败了就直接失败
Promise.race方法: (promises) => {}
promises: 包含n个promise的数组
说明: 返回一个新的promise, 第一个完成的promise的结果状态就是最终的结果状态
AXIOS
具备以下特点：
在浏览器中创建XMLHttpRequest请求
在node.js中发送http请求
支持Promise API
拦截请求和响应
转换请求和响应数据
取消要求
自动转换JSON数据
客户端支持防止CSRF/XSRF(跨域请求伪造)
原生XMLHttpRequest实现ajax请求
var request = new XMLHttpRequest(); // 创建XMLHttpRequest对象 //ajax是异步的，设置回调函数 request.onreadystatechange = function () { // 状态发生变化时，函数被回调 if (request.readyState === 4) { // 成功完成 // 判断响应状态码 if (request.status === 200) { // 成功，通过responseText拿到响应的文本: return success(request.responseText); } else { // 失败，根据响应码判断失败原因: return fail(request.status); } } else { // HTTP请求还在继续... } } // 发送请求: request.open('GET', '/api/categories'); request.setRequestHeader("Content-Type", "application/json") //设置请求头 request.send();//到这一步，请求才正式发出
axios
是基于Promise的，因此可以使用Promise API
axios的请求方式：
axios(config)
axios.request(config)
axios.get(url [,config])
axios.post(url [,data [,config]])
axios.put(url [,data [,config]])
axios.delete(url [,config])
axios.patch(url [,data [,config]])
axios.head(url [,config])
//执行GET请求 import axios from 'axios' axios.default.baseURL = 'http://localhost:3000/api/products' axios.get('/user?ID=12345') //返回的是一个Promise .then(res=>console.log(res)) .catch(err=>console.log(err)); //可配置参数的方式 axios.get('/user',{ params:{ ID:12345 } }).then(res=>console.log(res)) .catch(err=>console.log(err)); //发送post请求 axios.post('/user',{ firstName: 'simon', lastName:'li' }).then(res=>console.log(res)) .catch(err=>console.log(err));
2222222222222222
var baseURL = "http://localhost:8080"
function getUserInfo() {
return axios.get(baseURL + '/user/getUserInfo?userId=1');
}
function getUserDetail() {
return axios.get(baseURL + '/user/getUserDetail?userId=1');
}
axios.all([getUserInfo(), getUserDetail()])
.then(axios.spread(function (userInfo, userDetail) {
// 两个请求现在都执行完成
......
}));
各种请求的方法---->https://blog.csdn.net/weixin_60513652/article/details/122017198?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165571213316782248521780%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=165571213316782248521780&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~rank_v31_ecpm-1-122017198-null-null.142^v17^pc_search_result_control_group,157^v15^new_3&utm_term=axios%E7%9A%84async+%28url%2C+params%29+%3D%3E+%7B+++let+%7B+data+%7D+%3D+await+instance.post%28url%2C+params%29%3B+++return+data%3B&spm=1018.2226.3001.4187
3、发送并发请求或正常请求
通过axios.all(iterable)可实现发送多个请求，参数不一定是数组，只要有iterable接口就行，函数返回的是一个数组
axios.spread(callback)可用于将结果数组展开
//发送多个请求(并发请求)，类似于promise.all，若一个请求出错，那就会停止请求 const get1 = axios.get('/user/12345'); const get2 = axios.get('/user/12345/permission'); axios.all([get1,get2]) .then(axios.spread((res1,res2)=>{ console.log(res1,res2); })) .catch(err=>console.log(err))
axios API
1、创建一个实例
const instance = axios.create({ baseURL: 'http://localhost:3000/api/products', timeout: 1000, headers: {'X-Custom-Header':'foobar'} }); //instance的使用 instance.get('/user',{ params:{ID:12345} }).then(res=>console.log(res)) .catch(err=>console.log(err))
Config配置选项
{ //服务器的地址，是必须的选项 url: '/user', //请求的方式，若没有则默认是get method:'get', //如果url不是绝对地址，则会加上baseURL baseURL: 'http://localhost:3000/', //transformRequest允许请求的数据在发送至服务器之前进行处理，这个属性只适用于put、post、patch方式 //数组的最后一个函数必须返回一个字符串或者一个'ArrayBuffer'或'Stream'或'Buffer' 实例或'ArrayBuffer'，'Formdata'， //若函数中用到了headers，则需要设置headers属性 transformRequest: [function(data,headers){ //根据需求对数据进行处理 return data; }], //transformResponse允许对返回的数据传入then/catch之前进行处理 transformResponse:[function(data){ //依需要对数据进行处理 return data; }], //headers是自定义的要被发送的信息头 headers: {'X-Requested-with':'XMLHttpRequest'}, //params是请求连接中的请求参数，必须是一个纯对象 params:{ ID:12345 }, //paramsSerializer用于序列化参数 paramsSerializer: function(params){ return Qs.stringify(params,{arrayFormat:'brackets'}); }, //data是请求时作为请求体的数据——request.body //只适用于put、post、patch请求方法 //浏览器:FormData，File，Blob;Node:stream data:{ firstName: 'simon', }, //timeout定义请求的时间，单位是毫秒，如果请求时间超过设定时间，请求将停止 timeout:1000, //withCredentials表明跨跨域请求书否需要证明。 withCredentials:false, //默认值 //adapter适配器，允许自定义处理请求 //返回一个promise adapter:function(config){ /*...*/ }, //auth表明HTTP基础的认证应该被使用，并提供证书 auth:{ username:'simon', password:'123456', }, //responseType表明服务器返回的数据类型，这些类型包括：json/blob/document/ arraybuffer/text/stream responseType: 'json', //proxy定义服务器的主机名和端口号 //auth属性表明HTTP基本认证应该跟proxy相连接，并提供证书 //这将设置一个'Proxy-Authorization'头(header)，覆盖原来自定义的 proxy:{ host:127.0.0.1, port:8080, auth:{ username:'simon', password:'123456' } }, //取消请求 cancelToken: new CancelToken(cancel=>{}) }
2、拦截器interceptors
拦截器是指当发送请求或者得到响应被then或catch处理之前对它们进行拦截，拦截后可对数据做一些处理，比如给请求数据添加头部信息，或对响应数据进行序列化，然后再传给浏览器，这些都可以在拦截器中进行
//添加一个请求拦截器 axios.interceptors.request.use(config=>{ //在请求之前做一些事 return config; },err=>{ //请求错误的时候做一些事 return Promise.reject(err); }); //添加一个响应拦截器 axios.interceptors.response.use(response=>{ //对返回的数据做一些处理 reutrn response; },err=>{ //对返回的错误做一些处理 return Promise.reject(err); }); //移除拦截器 const myInterceptor = axios.interceptors.request.use(config=>{return cofig}) axios.interceptors.request.eject(myInterceptor); //在一个axios实例中使用拦截器 var instance = axios.create(); instance.interceptors.request.use(function(){/*...*/});
async/await 的基本用法
async和await是ES8引入的新语法，准确说来是异步函数实现的语法糖，使用async和await可以更加方便的进行异步操作
async 关键字用于函数上（async函数的返回值是Promise实例对象）
await 关键字用于 async 函数当中（await可以得到异步的结果）
一个实例
1=配置文件如下//常量 存放 let model = { //接口地址 开发测试正式 dev: "/api", test: "", main: "", };
export const BASE_URL = model.dev;
export const pathNameList = { //路由对应的名称 巴拉巴拉 }
2-封装request.js
import { BASE_URL } from "../config/conster";//导入配置文件 import axios from "axios"; var instance = axios.create({ baseURL: BASE_URL, timeout: 1000, headers: { "Content-Type": "application/json" }, }); // 添加请求拦截器 instance.interceptors.request.use( function (config) { // 在发送请求之前做些什么 return config; }, function (error) { // 对请求错误做些什么 return Promise.reject(error); } ); // 添加响应拦截器 instance.interceptors.response.use( function (response) { // 对响应数据做点什么 return response; }, function (error) { // 对响应错误做点什么 return Promise.reject(error); } ); export let $get = async (url, params) => { let { data } = await instance.get(url, { params }); return data; }; export let $post = async (url, params) => { let { data } = await instance.post(url, params); return data; }; export let $put = async (url, params) => { let { data } = await instance.put(url, params); return data; }; export let $delete = async (url) => { let { data } = await instance.delete(url); return data; };
3-请求数据
//导入请求函数 import { $put, $get, $post } from "@/utils/request";
export let APage = async (params, limit, page) => { let data = await $post( `api/项目/A/page?limit=${limit}&page=${page}`, params ); return data; };