0


axios 的使用

axios的使用

目录

axios介绍

官方介绍: axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。
简单来说,axios 用于发送异步 http 请求,用于在 vue 中替代 ajax(vue 中使用 axios,jquery 中使用 ajax)。

axios中文文档

axios起步
axios中文文档

cdn引入axios

使用 jsDelivr CDN:

<scriptsrc="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

使用 unpkg CDN:

<scriptsrc="https://unpkg.com/axios/dist/axios.min.js"></script>

在我的电脑上,

jsDelivr CDN

引入要快一点。

axios发起get请求:

// 向给定ID的用户发起请求
axios.get('url/user?ID=12345').then(function(response){// 处理成功情况
    console.log(response);}).catch(function(error){// 处理错误情况
    console.log(error);}).then(function(){// 总是会执行});

get 请求也可以使用以下方式:

axios.get('url/user',{params:{ID:12345}}).then(function(response){
    console.log(response);}).catch(function(error){
    console.log(error);}).then(function(){// 总是会执行});

axios发起post请求

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

创建axios实例

如果网页中多处使用 axios 请求同一个网址,当需要修改网址时,则需要大量改动,所以可以通过创建 axios 实例 (instance) ,只改动实例即可:

const instance = axios.create({// `baseURL` 将自动加在 `url` 前面,除非 `url` 是一个绝对 URLbaseURL:'https://some-domain.com/api/',//超时时间:5stimeout:5000,headers:{'X-Custom-Header':'foobar'}});//get中具体的URL就可以省略,请求时baseURL会自动加在'/user'前
instance.get('/user?ID=12345').then(function(response){// 处理成功情况
    console.log(response);}).catch(function(error){// 处理错误情况
    console.log(error);}).then(function(){// 总是会执行});

axios拦截器(interceptor)

作用: 用来将 axios 中共有参数,响应公共处理交给拦截器处理,减少 axios 发送请求时的代码冗余。

拦截器类型:axios分为请求拦截器 (request) 和响应拦截器 (response),请求拦截器在发送请求时处理,响应拦截器在收到响应时处理。

拦截器使用:

  1. 请求拦截器:
const instance = axios.create({// `baseURL` 将自动加在 `url` 前面,除非 `url` 是一个绝对 URLbaseURL:'https://some-domain.com/api/',//超时时间:5stimeout:5000,});// 添加请求拦截器
instance.interceptors.request.use(function(config){// 在发送请求之前做些什么// config——配置对象,通过对config的处理进行请求时增强操作
    console.log(config);// 如果请求中没有"?",添加"?",否则添加"&"if(config.url.indexOf("?")==-1){
        config.url +="?token=1234";}else{
        config.url +="&token=1234";}return config;},function(error){// 对请求错误做些什么return Promise.reject(error);});

config 对象展示:
在这里插入图片描述
可以看到 config 中的信息是 axios 的请求配置信息
2. 响应拦截器

// 添加响应拦截器
instance.interceptors.response.use(function(response){// 2xx 范围内的状态码都会触发该函数。// 对响应数据做点什么
    console.log(response);// 可以代替catchif(response.status !=200){alert("服务器错误");}return response;},function(error){// 超出 2xx 范围的状态码都会触发该函数。// 对响应错误做点什么return Promise.reject(error);});

response 对象就是后端返回的 json 数据:
在这里插入图片描述


本文转载自: https://blog.csdn.net/qq_51133939/article/details/126226917
版权归原作者 千梦、流羽 所有, 如有侵权,请联系我们删除。

“axios 的使用”的评论:

还没有评论