axios快速上手（简单使用）

2021-04-18 22:03:10 阅读：183 来源： 互联网

标签：axios 请求 get 快速 baseURL 简单 post data

axios对ajax请求进行了封装，并且使用promise的链式调用使得网络请求的代码逻辑更为清晰，同时支持async和await的编写方式使代码看起来像同步，更加方便于理解和阅读。axios这个库的体积也不大，先在项目里进行安装，npm i axios --save，然后引入就可以直接使用。

import axios from 'axios';

axios({
  url: 'https://httpbin.org/post',
  method: 'post', // 默认为get
  data: {        // post请求传递参数用data, get请求传递参数用params
     name: 'macus',
     age: 18 
  }
}).then(value=>{
    // 获取请求成功的结果
    console.log(value)
}).catch(error=>{
    // 获取请求发送失败的结果
    console.log('error', error)
})

以下图片是axios的成功响应返回的结果，可以看到返回的信息非常的多，其中data是服务器真正返回的内容，而其它的信息全都是axios提供的，其中包括请求的配置config，头部信息headers，XMLHttpRquest的响应状态

axios还提供了很多的API用于发送不同的网络请求，以上请求还可以写成以下形式，这样就不用写method属性，更为简洁一些

axios.post('https://httpbin.org/get', {
    name: 'macus',
    age: 18
})

还有很多其它的API

axios.get / axios.put / axios.delete / axios.request

虽然api的名字不同，其实这些api全都是调用的axios.request方法，以下为axios源码，可以看到都是调用的Axios.prototype.request

一般来说，业务的网络请求地址的域名都是固定的，可以在发送请求时定义一个baseURL

// 发送请求时定义baseURL
axios({
  baseURL: 'https://httpbin.org',
  url: '/post',
  method: 'post', // 默认为get
  data: {
    name: 'macus',
     age: 18
  }
})

每一个请求都定义一个baseURL使得代码冗余，这里可以在全局的配置项里进行定义

// 通过axios.defaults进行全局配置
axios.defaults.baseURL = 'https://httpbin.org'


axios({
  url: '/post',
  method: 'post', // 默认为get
  data: {
     name: 'macus',
     age: 18
  }
})

当有多个域名用于网络请求时，定义一个默认全局的baseURL就明显不够用了，axios提供了自定义实例的方式，我们可以通过axios.create定义多个实例用于配置不同类型的网络请求，定义之后发送网络请求方式与通过axios这个实例对象去调用一致

const instance = axios.create({
   baseURL: 'https://httpbin.org'
})

instance.get('/get', {
   params: {
      name: 'macus'
   }
})

有时候，我们想对请求和响应做一些统一的处理，比如发送请求的时候展示加载的动画、检查请求参数中有没有携带token，如果没有就需要用户登录，再比如，响应报文返回的数据项太多，而我们只需要服务器返回的数据就行，那么这个时候，可以使用拦截器来对请求和响应进行通用的处理，这里再使用上面创建的instance实例对象。

// 对请求进行拦截，分别传入请求成功和失败的处理函数
instance.interceptors.request.use(config=>{ 
    // 可以在这里进行一些逻辑处理
    console.log('请求拦截了', config)
    // config为请求的配置项信息，必须要有请求报文的返回
    return config
}, error=>{
    // 处理请求失败
})

// 对响应进行拦截，分别传入响应成功和失败的处理函数
instance.interceptors.response.use(result=>{
    console.log('响应拦截了',result)
    // result为响应信息，必须将响应报文进行返回
   // 只需要服务器返回的data数据，可直接返回data
    return result.data
}，error=>{
    // 失败时的处理方式，如 404 500 等
})

目前每发送一个网络请求，都需要调用axios的实例，假如有一天这个库有bug，或者后续将项目进行优化，想使用别的库，那么有100处发送了网络请求，这100处都需要修改，这样代码的可维护性变得比较差，为了解决这样的问题，我们可以自行进行一个封装，每发送网络请求，都使用我们自定义的函数，这样后续即使想换成别的库，直接修改我们封装的函数就行，下面做一个简单封装的演示

// ajaxRequest.js
import axios from 'axios'
const instance = axios.create({
  baseURL: 'https://httpbin.org',
  timeout: 5000 // 超时时间
})
export function requestPost(url, data, successCallback, errorCallback){
  instance({
    url,
    data,
    method: 'post'
  }).then(successCallback)
  .catch(errorCallback)
}

//调用的页面
import { requestPost} from './ajaxRequest'
requestPost('/post', {name: 'kiki'}, result=>{
   console.log('成功了',result)
},error=>{
   console.log('失败了',error)
})

以上就是axio的快速上手使用~

标签：axios,请求,get,快速,baseURL,简单,post,data
来源： https://www.cnblogs.com/vigourice/p/14674726.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

axios快速上手（简单使用）