Axios学习笔记

Axios简介

axios前端异步请求库类似JQuery ajax技术,
ajax用来在页面发起异步请求到后端服务,并将后端服务响应数据渲染到页面上,
jquery推荐ajax技术,但vue里面并不推荐在使用jquery框架,vue推荐使用axios异步请求库。
axios总结:

  • 用来在前端页面发起一个异步请求,请求之后页面不动,响应回来刷新页面局部;
  • 官方定义: axios 异步请求库并不是vue官方库第三方异步库在vue中推荐axios;
  • 特点:易用、简洁且高效的http库 ---> 发送http异步请求库。

Axios功能&特性

  • 从浏览器中创建XLHttpRequests从 node.js 创建http请求(发送axios异步请求)
  • 支持Promise API
  • 拦截请求和响应(做拦截器)
  • 转换请求数据和响应数据取消请求
  • 自动转换JSON数据,客户端支持防御XSRF

常规使用

发送Get请求,查询:

复制代码
axios.get("http://localhost:8081/demo?id=21&name=xiaowang ").then( function(res){
    //代表请求成功之后处理
    console.1og (res.data);
}).catch( function (err){
    //代表请求失败之后处理
    alert ('进入catch ')
    console.log (err);
});

// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345').then(function (response) {
    console.log(response);
  }).catch(function (error) {
    console.log(error);
  });

// 可选的,上面的请求可以这样做
axios.get('/user', {
    params: {
      ID: 12345
    }
  }).then(function (response) {
    console.log(response);
  }).catch(function (error) {
    console.log(error);
  });

发送POST,添加

复制代码
axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }).then(function (response) {
    console.log(response);
  }).catch(function (error) {
    console.log(error);
  });

其他请求

复制代码
axios.put(.then( ).catch ( ); //修改
axios.patch( ).then( ).catch( );
axios.delete( "ur1?id=21").then ( ).catch ( ); //删除

Axios的封装

复制代码
import axios from 'axios'
export default function axios(option){
    return new Promise((resolve,reject) => {
    //1.创建sxios实例
    const instance = axios.create({
        url: 'api',
        timeout: 5000,
        headers: ''
    })
    //2.传入对象进行网络请求
    instance(option).then(res => {
        resolve(res)
    }).catch(err => {
        reject(err)
    })
})
}

Axios创建默认实例发送请求

复制代码
//创建axios的配置对象
var instance = axios. create({
    baseURL: 'http://localhost:8081/',        //基础路径,后面的请求的url就直接写接口路径就行
    timeout: 5000,
});

这里的请求地址,直接写对应的接口路径
instance.get("/demo?id=21&name=xiaowang ").then( function(res) {
    //代表请求成功之后处理
    console.log(res);
    console.1og (res.data);
}).catch( function (err) {
    //代表请求失败之后处理
    alert ('进入catch ');
    console.log (err);
});

Axios封装一个request请求

复制代码
export function request(config, success, failure) {
  // 1.创建axios的实例
  const instance = axios.create({
    baseURL: 'http://127.0.0.1:8080',
    timeout: 5000
  })
  // 发送真正的网络请求
  instance(config).then(res => {
      success(res);
    }).catch(err => {
      failure(err)
    })
}

Axios拦截器

请求拦截器

请求拦截器作用是在发出请求时,拦截下用户的请求,执行完一系列处理再发送出去(像添加cookie、token,请求头等)

配置请求拦截器

  • 首先创建一个axios实例对象

    import axios from 'axios'
    import { ELMessage } from 'element-plus'
    const myRequest = axios.create({
    baseURL: process.env.BASE_API, // 这里可以写自己访问的地址,例如127.0.0.1
    timeout: 3000, // 请求超时时间
    headers: {
    "Content-Type": "application/json;charset=utf-8"
    }
    })

  • 接下来就是配置请求拦截器(interceptor.request)

    myRequest.interceptors.request.use(
    req=>{...}, // 对发起的请求进行处理,方法写在{}中,req是请求参数
    err=>{...}, // 出现请求错误时进行的处理
    }

下面写一个设置token的实例:

复制代码
myRequest.interceptors.request.use(
    config => {
        const token = localStorage.getItem('token') // 获取存取的token
        if(token){ // 不为空的话就设置进headers
            config.headers['token'] = token
        }
        return config
    },
    err => {
        return Promise.reject(error)
    }
)

响应拦截器

配置响应拦截器

复制代码
myRequest.interceptors.response.use(
        res=>{...}, // 对响应进行处理,方法写在{}中,res是返回数据
        err=>{...}, // 出现请求错误时进行的处理
)

假如服务器的响应为:

复制代码
{
        "errCode" : 0,
        "errDesc" : "Success",
        "data": "xxxxxx"
}

这时候我们可以这样写响应拦截器:

复制代码
myRequest.interceptors.response.use(
    res => {
        if(res.errCode ==  0){
            return Promise.resolve(res.data)
           }
        else {
            ElMessage({
                message: "Error",
                type: 'error',
                duration: 5 * 1000
            })
            return Promise.reject(new Error("Error Message"))
        }
    },
    err => {
        ElMessage({
            message: err.data.message,
            type: 'error',
            duration: 5 * 1000
        })
    }
)

通过上面的处理之后,我们axios.xxx().then((res)=>{...})的res就为响应数据的data,其中errCode和errDesc就被处理掉了。

相关推荐
超浪的晨16 分钟前
Java UDP 通信详解:从基础到实战,彻底掌握无连接网络编程
java·开发语言·后端·学习·个人开发
使二颗心免于哀伤2 小时前
《设计模式之禅》笔记摘录 - 10.装饰模式
笔记·设计模式
悠哉悠哉愿意2 小时前
【电赛学习笔记】MaxiCAM 项目实践——与单片机的串口通信
笔记·python·单片机·嵌入式硬件·学习·视觉检测
快乐肚皮2 小时前
ZooKeeper学习专栏(五):Java客户端开发(原生API)详解
学习·zookeeper·java-zookeeper
慕y2742 小时前
Java学习第七十二部分——Zookeeper
java·学习·java-zookeeper
岩中竹3 小时前
广东省省考备考——常识:科技常识(持续更新)
笔记
★YUI★3 小时前
学习游戏制作记录(剑投掷技能)7.26
学习·游戏·unity·c#
Olrookie3 小时前
若依前后端分离版学习笔记(三)——表结构介绍
笔记·后端·mysql
蓝桉8024 小时前
opencv学习(图像金字塔)
人工智能·opencv·学习
rannn_1114 小时前
Java学习|黑马笔记|Day23】网络编程、反射、动态代理
java·笔记·后端·学习