【vue】axios基础与应用

aixos基础与应用

Axios是一个基于promise的HTTP库,可以用在浏览器node.js

我们先实现axios在Vue中发起一个请求再详细讲解它

  1. 在vue中使用axios.get()
  2. axios概述与配置
  3. axios上的方法

在Vue中使用axios.get()

//安装axios
npm i axios
//在store的actons中发起请求
import axios from 'axios'

export const data = {
    namespaced: true,
    actions: {
        getData({ commit }, url) {
            axios.get(url)
                .then(res => {
                    console.log(res.data);
                    commit('GETDATA', res.data)
                })
        }
    },
    mutations: {
        GETDATA(state, data) {
            state.student = data
        }
    },
    state: {
        student: ''
    }
}
//在组件中dispatch
<template>
  <div id="app">
    <button @click="getStudent">请求数据</button>
    <span>{{ student }}</span>
  </div>
</template>

<script>
import { mapActions } from "vuex";
import { mapState } from "vuex";
export default {
  name: "App",
  computed: {
    ...mapState("data", ["student"]),
  },
  methods: {
    getStudent() {
      this.getData("http://localhost:8848");
    },
    ...mapActions("data", ["getData"]),
  },
};
</script>
axios.get(url)有点像fetch()方法,返回一个Promise,然后进行后续的链式处理请求返回的内容

2 概述

特性

  • 从浏览器中创建XHR对象
  • 从node.js创建http请求
  • 支持Promise API
  • 拦截请求和响应、取消请求
  • 转换请求数据和响应数据
  • 自动转换JSON数据
  • 客户端支持防御XSRF

axios API
除了使用axios.get()这样显式的调用其方法进行请求,也可以直接使用axios({config})或者aixos(url,{config})

axios({
    method:'post',
    url:'http://localhost:8848',
    data:{
        user:'Alice'
    }
})
axios('http://localhost:8848')
如果没有声明method,默认为GET方法

请求配置对象的属性

配置项值类型描述
urlString请求服务器的URL
method默认'get'请求方法
baseURLString自动加在url前面
headersObject自定义请求头
paramsObject/URLSearchParamsparams参数
data下述下述
timeoutNumber请求超时的毫秒数
withCredentialsBoolean跨域请求是否需要使用凭证
proxyObject定义代理服务器的host,port,以及auth
authObjectHTTP基础验证并提供凭据
responseType默认'json'响应数据类型
responseEncoding默认'utf-8'响应数据编码
xsrfCookieName默认'XSRF-TOKEN'xsrf token的值的cookie的名称
xsrfHeaderName默认'X-XSRF-TOKEN'携带xsrf token值的http头部的名称
maxContentLengthNumber响应内容的最大尺寸
socketPath默认nullscocke路径或代理
maxRedirectsNumber最大重定向数目
httpAgenthttp.Agent()自定义代理,httpsAgent同理
auth将设置一个Authorization头覆盖headers中的该选项
  • data:用作请求主体被发送的数据

    未设置transformRequset时,data必须是string、plain object、ArrayBuffer、ArrayBufferView、URLSearchParams类型
    浏览器专属:FormData、File、Blob,Node专属:Stream

请求配置对象的方法

  • transformRequest:在发送请求前修改请求数据,限定PUT、POST、PATCH

    // 后面数组中的函数必须返回一个String、ArrayBuffer、Stream
    transformRequest: [function (data, headers) {                                
      // 对 data 进行任意转换处理
      return data;
    }],
  • transformResponse:在then/catch前修改响应数据

    transformResponse: [function (data) {
      // 对 data 进行任意转换处理
      return data;
    }],
  • paramsSerializer:params参数序列化

    paramsSerializer: function(params) {
      return Qs.stringify(params, {arrayFormat: 'brackets'})
    },
  • adapter:自定义处理请求,以使测试更轻松

    返回一个promise并应用一个有效的响应
    adapter: function (config) {
      /* ... */
    },
  • onUploadProgress:为上传处理进度事件

    onUploadProgress: function (progressEvent) {
      // 使用原生的进度事件
    },
  • onDownloadProgress:为下载处理进度事件

    onDownloadProgress: function (progressEvent) {
      // 对原生进度事件的处理
    },
  • validateStatus:协商可接受的HTTP响应状态码,不在范围内reject

    validateStatus: function (status) {
      return status >= 200 && status < 300; // default
    },
  • cancelToken:取消请求的cancel token

    cancelToken: new CancelToken(function (cancel) {
    })

响应结构

选项描述
data服务器提供的响应数据
status服务器响应的HTTP状态码
statusText服务器响应的HTTP状态信息
headers服务器的响应头
config为请求提供的配置信息
request生成此响应的请求(中间可能有重定向)

3 axios上的方法

import axios from 'axios'
console.dir(axios);

image.png

  1. 请求方法
  2. 并发
  3. 默认配置
  4. 拦截器
  5. 取消

3.1 请求方法

axios上的请求方法

方法参数描述
requestconfig等价于axios原始请求
geturl,configget请求
deleteurl,config从服务器删除一份文档
headurl,config只从服务器获取文档的首部
optionsurl,config决定可以在服务器上执行哪些方法
posturl,data,config向服务器发送需要处理的数据
puturl,data,config将请求的主体部分存储在服务器
patchurl,data,config请求局部更新
  • put与patch的区别

    put需要提供完整的资源对象,在更新时缺少的字段会被清空
    patch发起的请求时局部更新,不需要提供完整的字段,仅更新收到字段

创建实例
axios.create({config})可以自定义新建一个axios实例

const instance = axios.create({ method: 'POST' })
console.dir(instance);

image.png

可以使用实例的请求方法进行再设置相关配置

3.2 并发

使用axios.all([req1,req2])可以发送多个请求,axios.spead(callback(res1,res2))等待所有请求都完成返回结果

methods: {
  firstGet() {
    console.log("调用第一个接口");
    return axios.get("http://localhost:8848");
  },
  secondGet() {
    console.log("调用第二个接口");
    return axios.get("http://localhost:8000");
  },
  requst() {
    axios.all([this.firstGet(), this.secondGet()]).then(
      axios.spread((res1, res2) => {
        console.log("所有请求完成");
        console.log("请求1结果", res1);
        console.log("请求2结果", res2);
      })
    );
  },
},

image.png
axios上的all方法相当于Promise.all方法的混入,在全部请求都完成后执行axios.spread(callback)

3.3 默认配置

defaults选项记录了请求的默认配置

import axios from 'axios'
console.log(axios.defaults);

image.png
可以对默认设置进行修改

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'

优先级
config > defaults > 库默认值
axios设置默认值后,创建的实例会继承这个默认值

3.4 拦截器

使用interceptors可以在请求或响应被then/catch处理前拦截它们

import axios from 'axios'
console.log(axios.interceptors);

image.png
请求拦截器

// requset.use添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

响应拦截器

// response.use添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

移除拦截器

const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
//request.eject移除请求拦截器
axios.interceptors.request.eject(myInterceptor);

3.4 取消

使用cancel token取消请求
CancelToken.source工厂方法创建cancel token

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function(thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
     // 处理错误
  }
});

axios.post('/user/12345', {
  name: 'new name'
}, {
  cancelToken: source.token
})

// 取消请求(message 参数是可选的)
source.cancel('Operation canceled by the user.');

可以通过传递executor函数到CancelToken的构造函数来创建cancel token

const CancelToken = axios.CancelToken;
let cancel;

axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // executor 函数接收一个 cancel 函数作为参数
    cancel = c;
  })
});

// 取消请求
cancel();
  • isCancel(value)判断是否取消了请求
  • 一个cancel token可以取消多个请求
73 声望
6 粉丝
0 条评论
推荐阅读
【Vue2源码分析与实现】(一)变化侦测
(一)变化侦测该系列主要对Vue源码流程分析与简单实现,会省略源码中的一些细节初始化Object变化侦测Array变化侦测observe流程图1、初始化定义Vue构造函数向Vue原型混入操作方法,方便后期扩展在初始化函数中进...

怼怼1阅读 336

Vue中的diff算法
diff算法是一种通过同层的树节点进行比较的高效算法,避免了对树进行逐层搜索遍历,所以时间复杂度只有 O(n)。diff算法的在很多场景下都有应用,例如在 vue 虚拟 dom 渲染成真实 dom 的新旧 VNode 节点比较更新时...

款冬27阅读 13.4k评论 7

再也不学AJAX了!(三)跨域获取资源 ① - 同源策略
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第四篇,最近更新于 2023 年 1...

libinfs19阅读 4k评论 4

封面图
一个HTTP请求的曲折经历
作为程序员的我们每天都在和网络请求打交道,而前端程序员接触的最多的就是HTTP请求。平时工作中,处理网络请求之类的操作是最多的了。但是一个请求从客户端发出到被服务端处理、再回送响应,再被客户端接收这一...

nero24阅读 4.9k评论 1

给我实现一个前端的 Excel 导入和导出功能
前言【负责人 A】:现在报表部分基于接口的 Excel 的导入和导出功能有点慢,前端这边能不能实现一下这个功能,然后我们在比对看看效果!【切图仔 B】: 接口这边不能优化一下吗?比如排查下慢的原因什么的。【负...

熊的猫19阅读 2.6k

封面图
前端优化之 Http 相关优化总结
学习和总结文章同步发布于 [链接],有兴趣可以关注一下,一起学习和进步。Http 优化方式是前端性能优化的重要部分,也是前端必备的知识点之一。减少静态资源文件大小这个是最根本的途径,假设真的有个 10 几兆以...

Samon17阅读 3.1k

浏览器之HTTP缓存的那些事
简单来说,浏览器缓存就是把一个已经请求过的Web资源(如html,图片,js)拷贝一份副本储存在浏览器中。缓存会根据进来的请求保存输出内容的副本。当下一个请求来到的时候,如果是相同的URL,缓存会根据缓存机制...

Samon16阅读 9.4k评论 7

73 声望
6 粉丝
宣传栏