likes
comments
collection
share

Axios的封装以及如何使用

作者站长头像
站长
· 阅读数 17

Axios的封装以及如何使用

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

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

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

一、Axios是什么

Axios 就是对 ajax 的封装

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

二、下载

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

三、使用axios

3.1 发起get请求

  1. 语法：
  2. 请求地址：http://地址?xx=yy&xx=yy&xx=yy
  3. 返回结果result体现的是Promise对象，本身可以调用then或catch方法，或通过async或await进一步修饰

  4. 给服务器传递参数的时候需要借助params成员

    const result = axios.get(地址,{params:{xx:yy,xx:yy,xx:yy....}})

  5. async和await介入

    async function getList(){
  var result = await axios.get('http://127.0.0.1:3000/api/get')
}

    3.2 发起post请求

  6. 语法：

    axios.post(地址,{xx:yy,xx:yy,xx:yy})

  7. 例子：

    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的成员名称，可以自定义为其他

  2. 给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本身有两种拦截器：请求拦截、响应拦截

  • 请求拦截器
  • 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)
})
  • 响应拦截器
  • axios完成与服务端机交互回到客户端后就执行此处逻辑，在这个地方可以做一些后续收尾事宜

  • response代表服务器端给axios返回的信息，一般不做处理

    // 添加响应拦截器
axios.interceptors.response.use(function(response) {
// 对响应数据做点什么
nprogress.done()

return response
}, function(error) {
// 对响应错误做点什么
return Promise.reject(error)
})

    六、封装Axios

    6.1 封装

  • 在Vue项目中，可以在src根目录下新建一个axios.js(或axios.ts)
  • Axios的封装以及如何使用
  • 在React项目中，可以新建一个request文件夹，request文件夹中新建一个request.js(或request.ts) Axios的封装以及如何使用
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>

  2. 在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中如何使用，如果感觉写的实用可以辛苦大家点个赞啦，谢谢，文章会不定期更新哒。