关于前端:Axios的封装以及如何使用

Axios的封装以及如何应用

提醒：本文依据黑马B站视频课整顿

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

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

一、Axios是什么

Axios 就是对 ajax 的封装

之前如何发动数据申请
最原生的new XMLHttpRequest对象发动Ajax申请(open send onreadystatechange readyState responseText)
$.ajax{{配置对象}}
$.post(url地址，function(){})
$.get(url地址，处理函数)
当然还有起初出的 Fetch (这里就不多做解释,大家感兴趣能够专门去搜一下fetch的应用办法~)
当初用的 axios 来发动 ajax 申请
能够反对 get 和 post 等申请，然而无奈发动 JSONP 申请
如果波及到 JSONP 申请，能够让后端启用 cors 跨域资源共享即可
在 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申请

语法：
申请地址：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....}})

async和await染指

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

3.2 发动post申请

语法：
```
axios.post(地址,{xx:yy,xx:yy,xx:yy})
```

例子：

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的配置

把axios配置给Vue并成为其一个子成员，每次须要通过Vue触发axios调用(axios本人不要贸然执行)

Vue.prototype.$http = axios// 在main.js中配置
this.$http.get()// 在组件中应用，$http是vue指向axios的成员名称，能够自定义为其余

给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)
在React我的项目中，能够新建一个request文件夹，request文件夹中新建一个request.js(或request.ts)

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 封装后应用

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>

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

关于前端:Axios的封装以及如何使用

Axios的封装以及如何应用

一、Axios是什么

二、下载

三、应用axios

3.1 发动get申请

3.2 发动post申请

3.3 例子

四、Axios的配置

五、拦截器interceptors

5.1 为什么应用拦截器

5.2 axios自身有两种拦截器：申请拦挡、响应拦挡

六、封装Axios

6.1 封装

6.2 封装后应用

总结

评论

发表回复取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

关于前端:Axios的封装以及如何使用

Axios的封装以及如何应用

一、Axios是什么

二、下载

三、应用axios

3.1 发动get申请

3.2 发动post申请

3.3 例子

四、Axios的配置

五、拦截器interceptors

5.1 为什么应用拦截器

5.2 axios自身有两种拦截器：申请拦挡、响应拦挡

六、封装Axios

6.1 封装

6.2 封装后应用

总结

评论

发表回复 取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

发表回复取消回复