zoukankan      html  css  js  c++  java
  • Axios及其async await封装

    Axios(IE8+)

    基于promise的http库
    可用于浏览器与node.js

    1.特性

    1. 支持promise API
    2. 拦截请求和相应
    3. 转换请求数据和响应数据
    4. 取消请求
    5. 自动转换JSON数据
    6. 客户端支持防御XSRF攻击

    2.axios请求方法:get,post,put, patch, delete

    1get: 获取数据
    2post(新建): 提交数据(表单,文件)
    3put(更新): 更新数据(所有数据推送到后端)
    4patch(耗性能): 更新数据(只将修改的数据推送到后端)
    5delet: 删除数据

    3.返回304(重定向)

    表示重复的请求,直接返回304,加快请求速度

    4.post(Content-Type)

    11.form-data 表单提交(文件上传)
    22.application/json 常用数据提交
    3
    4//form-data请求举例
    5let formData = new FormData()
    6for(let key in data){
    7    formData.append(key,data[key])
    8}

    5.并发请求(同时进行多个请求,并统一处理返回值)

     1//axios.all() 用于多个请求并发
    2//axios.spread() 用于处理返回值
    3
    4axios.all(
    5    [
    6        axios.get('/data.json1'),
    7        axios.get('/data.json2')
    8    ]
    9).then(
    10    axios.spread((json1,json2)=>{
    11        console.log(json1,json2)
    12    })
    13)

    6.axios实例化

    当每请求的设置不尽相同时,可以通过配置实例发起不同设置的请求

    1let instance = axios.create({
    2    baseURL'http://localhost:8080',
    3    timeout1000,
    4})
    5instance.get('/data.json').then(res=>{
    6    console.log(res)
    7})

    7.axios配置

    1. 全局配置
    11.axios.defaults.timeout = 2000
    22.axios.defaults.baseURL = ''
    1. 实例配置
     1let instance = axios.create({
    2    //配置
    3    baseURL: 'http://localhost:8080',//请求的域名,基本地址
    4    timeout: 1000,//超时取消请求时长(ms),一般后台会有定义
    5    url: '/data.json',//请求路径
    6    method: 'get',//get,post,put, patch, delete(请求方法)
    7    headers: {//设置请求头
    8        token: '',//身份信息
    9    },
    10    params: {},//请求参数拼接在url(get)
    11    data: {},//请求参数放在请求体(post)
    12})
    13instance.defaults.timeout = 3000
    1. 请求配置
    1instance.get('/data.js',{
    2    timeout: 5000
    3})
    1. 优先级

    请求配置>实例配置>实例配置

    8.拦截器

    在请求或响应被处理前拦截他们

    1. 请求拦截器
     1axios.interceptors.request.use(
    2    config => {
    3        //发送请求前
    4        return config
    5    },
    6    err => {//错误处理
    7        //请求错误的时候 404 not find,401超时等
    8        return Promise.reject(err)
    9    }
    10)
    1. 响应拦截器
     1axios.interceptors.response.use(
    2    res => {
    3        //请求成功
    4        return res
    5    },
    6    err => {//错误处理
    7        //响应错误的时候 500服务器错误等
    8        return Promise.reject(err)
    9    }
    10)
    1. 取消拦截器
    1axios.interceptors.request.eject(interceptors)

    9.取消请求

     1let source = axios.CancelToken.source() //创建实例
    2axios.get('/data.js',{//开始请求
    3    cancelToken: source.token//配置项
    4}).then(res => {
    5    console.log(res)
    6}).catch(err => {
    7    console.log(err)
    8})
    9
    10source.cancel('请求取消了')//调用方法取消请求

    10.统一封装(async await 方法)

    api.js接口信息

     1//api.js接口信息
    2const api = {
    3    api1: {
    4        method: 'get',
    5        url: '/data1.js
    6    },
    7    api2: {
    8        method: '
    post',
    9        url: '
    /data2.js
    10    }
    11}
    12export default api

    http.js请求对象

     1import axios from 'axios'
    2import Api from 'api.js'
    3
    4let instance = axios.creat({
    5    baseURL'http://localhost:8080',
    6    timeout1000
    7})
    8const Http = {}//包裹请求方法的容器
    9
    10for(let key in Api){
    11    let api = Api[key]
    12    Http[key] = async function(
    13        params,//请求参数
    14        isFormData=false,//是否是form-data请求
    15        config={}//配置参数
    16    
    )
    {  
    17        let newParams = {}
    18
    19        //判断content-type是不是form-data类型
    20        if(params && isFormData){
    21            newParams = new FormData()
    22            for(let i in params){
    23                newParams.append(i,params[i])
    24            }
    25        }else newParams = params
    26
    27        //不同请求的判断
    28        let res = {}
    29        if(api.method === 'put' || api.method === 'post' || api.method === 'patch'){
    30            try{
    31                res = await instance[api.method](api.url,newParams,config)
    32            }catch(err){
    33                res = err
    34            }
    35        }else if(api.method === 'delete' || api.method === 'get'){
    36            config.params = newParams
    37            try{
    38                res = await instance[api.method](api.url,config)
    39            }catch(err){
    40                res = err
    41            }
    42        }
    43        return res //返回响应值
    44    }
    45}
    46//请求拦截器
    47instance.interceptors.request.use(
    48    config => {
    49        //发起请求前
    50        Toast.loading()
    51        return config
    52    },
    53    err => {
    54        //请求错误
    55        Toast.clear()
    56        return err
    57    }
    58)
    59//响应拦截器
    60instance.interceptors.response.use(
    61    res => {
    62        //响应前
    63        Toast.clear()
    64        return res.data
    65    },
    66    err => {
    67        //响应错误
    68        Toast.clear()
    69        return err
    70    }
    71)
    72
    73export default Http

    调用方法

     1import Http from 'http.js'
    2Vue.prototype.$Http = Http
    3
    4async function(){
    5    let res = await this.$Http.api1({id4})
    6}
    7
    8async function(){
    9    let res = await this.$Http.api2(info,true,config)
    10}

  • 相关阅读:
    ssm(spring+springmvc+mybatis)整合之环境配置
    OD机试题
    openpyxl 读取多个excle中的数据并保存到List中
    Python比较2个字典有哪些值不一致
    Python 正则表达式 匹配小数
    开始入驻博客园,审批神速,赞
    VUE入门实例
    VUE使用axios调用后台API接口
    Redis、Memcached和Tair,同为分布式缓存Redis为何更胜一筹?
    Redis可以用作消息队列吗?
  • 原文地址:https://www.cnblogs.com/qinyuandong/p/13640232.html
Copyright © 2011-2022 走看看