Axios的封装以及如何使用

提示：本文根据黑马B站视频课整理

有小伙伴在评论里让我出一篇关于Axios的，本文就整理了一下Axios的使用封装的问题，视频指路 黑马程序员

文章目录

提示：以下是本篇文章正文内容，下面案例可供参考

一、Axios是什么

Axios 就是对 ajax 的封装

  1. 之前如何发起数据请求
  • 最原生的new XMLHttpRequest对象发起Ajax请求(open send onreadystatechange readyState responseText)
  • $.ajax{{配置对象}}
  • $.post(url地址，function(){})
  • $.get(url地址，处理函数)
  • 当然还有后来出的 Fetch (这里就不多做解释,大家感兴趣可以专门去搜一下fetch的使用方法~)
  1. 现在用的 axios 来发起 ajax 请求
  • 可以支持 get 和 post 等请求，但是无法发起 JSONP 请求
  • 如果涉及到 JSONP 请求，可以让后端启用 cors 跨域资源共享即可
  1. 在 Vue 中，还可以使用 vue-resource 封装的 ajax 发起数据请求
  • 在 vue-resource 支持 get，post，jsonp 请求

二、下载

参考网址：axios
cdn方式：<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
npm方式：npm install axios

三、使用axios

3.1 发起get请求

  1. 语法：
  • 请求地址：http://地址?xx=yy&xx=yy&xx=yy
  • 返回结果result体现的是Promise对象，本身可以调用then或catch方法，或通过async或await进一步修饰
  • 给服务器传递参数的时候需要借助params成员
const result = axios.get(地址,{params:{xx:yy,xx:yy,xx:yy....}})
  1. async和await介入
async function getList(){
  var result = await axios.get('http://127.0.0.1:3000/api/get')
}

3.2 发起post请求

  1. 语法：
axios.post(地址,{xx:yy,xx:yy,xx:yy})
  1. 例子：
async function send_post() {
   let result  = await axios.post('http://127.0.0.1:3000/api/post', {name: 'hello', age: 18})
   console.log(result)
}

3.3 例子

<div id="app">
    <button @click="send_post()">post请求</button>
    <button @click="send_get()">get请求</button>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: 'aaa'
        },
        methods: {
            async send_get() {
                var {data: dt} = await axios.get('http://127.0.0.1:3000/api/get', {params:{name: 'hello', age: 18}})
                console.log(dt)
            },
            async send_post() {
                var {data: dt} = await axios.post('http://127.0.0.1:3000/api/post', {name: 'hello', age: 18})
                console.log(dt)
            }
        }
    })
</script>

四、Axios的配置

  1. 把axios配置给Vue并成为其一个子成员，每次需要通过Vue触发axios调用(axios自己不要贸然执行)
Vue.prototype.$http = axios// 在main.js中配置
this.$http.get()// 在组件中使用，$http是vue指向axios的成员名称，可以自定义为其他
  1. 给axios设置请求根地址，统一设置请求地址的前缀，做应用的时候就使用后缀，提升开发效率
axios.defaults.baseURL = '根地址' //语法

// 引入axios和配置
axios.defaults.baseURL = 'http://127.0.0.1:3000/api'
Vue.prototype.$http = axios

五、拦截器interceptors

5.1 为什么使用拦截器

  • axios在客户端与服务端之间传递数据时候是有时间消耗的
  • 网络好、服务器比较空闲，axios的执行速度快
  • 网络不好、服务器比较繁忙，axios的执行速度慢(这时用户需要多等待)
  • axios无论执行速度快还是慢，用户都需要等待，如果在axios执行过程中页面给予一定的提示，那么用户体验就比较好，这时候拦截器就可以应用上

5.2 axios本身有两种拦截器：请求拦截、响应拦截

  1. 请求拦截器
  • axios每次开始请求的时候先执行此处逻辑，在这个地方可以给axios做出发前的配置，也可以做出发前的检查工作，检查ok的情况下就开始向服务器端发请求
  • config代表axios请求的配置对象，后期可以借此给axios做相关配置
// axios的请求拦截器
axios.interceptors.request.use(function(config) {
  // -------------------------------------------
  // axios请求前的逻辑处理
  nprogress.start()
  var token = window.sessionStorage.getItem('token')
  if (token !== null) {
    config.headers.Authorization = token
  }
  //---------------------------------------
  return config
}, function(error) {
  return Promise.reject(error)
})
  1. 响应拦截器
  • axios完成与服务端机交互回到客户端后就执行此处逻辑，在这个地方可以做一些后续收尾事宜
  • response代表服务器端给axios返回的信息，一般不做处理
// 添加响应拦截器
axios.interceptors.response.use(function(response) {
  // 对响应数据做点什么
  nprogress.done()
  
  return response
}, function(error) {
  // 对响应错误做点什么
  return Promise.reject(error)
})

六、封装Axios

6.1 封装

  1. 在Vue项目中，可以在src根目录下新建一个axios.js(或axios.ts)
  2. vue
  3. 在React项目中，可以新建一个request文件夹，request文件夹中新建一个request.js(或request.ts)
    React
import axios from 'axios'

// 如果是ts文件可以加上这个接口
// 配置项接口
/**interface AxiosOption {
  baseURL: string
  timeout: number
}*/


// 配置项
//const axiosOption: AxiosOption = { // ts的话使用这个限定类型
const axiosOption = {
  baseURL: 'http://127.0.0.1:9000/manage',
  // baseURL: '/api',// 配置跨域后可以使用这个/api这个不固定，可以根据自己配置的跨域替换
  timeout: 5000,
}

// 创建一个单例
// 由于实际项目中可能会有多个接口地址
// create可以创建多个实例，在接口中要用几个地址就可以创建几个实例
const instance = axios.create(axiosOption)

// 添加请求拦截器
instance.interceptors.request.use(
  function (config) {
    // axios请求前的逻辑处理
    return config
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error)
  }
)

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

export default instance

6.2 封装后使用

  1. vue中，新建api.js接口模块
// 导入封装的axios
import axios from '../axios'
export default {
  //---------------------------隐藏页面----------------------------------------------
  /**
   * 添加
   */
  hideParameterAdd(data) {
    return axios.post(`/add`, data)
  },
}

//在要使用的.vue组件中import导入
<script>
import Api from '../api/api'
export default {
  methods: {
    async getData () {
      let { data } = await Api.hideParameterAdd({id:1,name:'张三'})
      console.log(data)
    }
  }
}
</script>
  1. 在React中，新建api.js
// 导入封装的request.js
import request from './request'
// 注册接口
export const registerApi = (params) => request.post('/register', params)

// React组件中
import React, { useState } from 'react'
// 在要使用的页面导入api.js
import { loginApi } from './request/api'

export default function Login() {
  const onFinish = async (values) => {
    loginApi(values).then((res: IResRegister) => {
      console.log(res)
    })
  }

  return (
    <div className="login">
    111
    </div>
  )
}

总结

提示：这里对文章进行总结：

以上就是Axios的介绍以及封装，封装之后再Vue中和在React中如何使用，如果感觉写的实用可以辛苦大家点个赞啦，谢谢，文章会不定期更新哒。

# javascript # 前端 # ajax # 前端框架
Logo
华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐

cover

解析openGauss账本数据库

avatar 华为开发者空间
cover

GaussDB高校行走进哈尔滨，与两校学子共话数据库人才发展

avatar 华为开发者空间
cover

GaussDB数据库高可用部署方案

avatar 华为开发者空间