[移动开发]十五、与服务端通信——axios（1）

本章概要

• 安装
• 基本用法
• axios API
• 请求配置
• 并发请求

在实际项目中，页面中所需要的数据通常是从服务端获取的，这必然牵涉与服务端的通信， Vue 官方推荐使用 axios 完成 Ajax 请求。
axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 Node.js 中。

15.1 安装

可以使用 CDN 方式安装 axios 。如下：

<!-- 引用最新版 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

如果采用模块化开发，则使用 npm 安装方式，执行以下命令来安装 axios。

npm install axios --save

或者使用 yarn 安装，执行以下命令：

yarn add axios --save

在 Vue 的脚手架项目中使用，可以将 axios 结合 vue-axios 插件一起使用，该插件只是将 axios 集成到 Vue.js 的轻度封装，本身不能独立使用。可以使用以下命令一起安装 axios 和 vue-axios。

npm install axios vue-axios

安装 vue-axios 插件后，使用形式如下：

import { createApp } from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

const app = createApp(App)
app.use(VueAxios,axios) //安装插件
app.mount('#app')

之后在组件内就可以通过 this.axios 调用 axios 的方法发送请求。

15.2 基本用法

HTTP 最基本的请求就是 get 请求 和 post 请求。使用 axios 发送 get 请求调用形式如下：

axios.get('/book?id=1').then(function(response){
  console.log(response)
}).catch(function (error){
  console.log(error)
})

get() 方法就收一个 URL 作为参数，如果有要发送的数据，则以查询字符串的形式附加在 URL 后面。当服务端返回成功响应（状态码是2XX）时调用 then() 方法中的回调，可以在该回调函数中对服务端的响应进行处理；如果出现错误，则会调用 catch() 方法中的回调，可以在该回调函数中对错误信息进行处理，并向用户提示错误。

如果不喜欢 URL 后附加查询参数的写法，可以为 get() 方法传递一个配置对象作为参数，在配置对象中使用 params 字段指定要发送的数据。如下：

axios.get('/book',{
  params:{ id:1 }
}).then(function(res){
  console.log(res)
}).catch(function(err){
  console.log(err)
})

可以使用 ES2017 的 async/await 执行异步请求。如下：

async function getBook(){
  try {
    const res = await axios.get('/book?id=1');
    console.log(res)
  }catch(err){
    console.log(err)
  }
}

post 请求是在请求体中发送数据，因此，axios 的 post() 方法多一个参数，该参数是一个对象，对象的属性就是要发送的数据。如下：

axios.post('/login',{
  username:'lisi',
  password:'1234'
}).then(function(res){
  console.log(res)
}).catch(function(err){
  console.log(err)
})

get() 和 post() 方法的原型如下：

get(url[,config])
post(url[,data[,config]])

接收到服务端的响应信息后，需要对响应信息进行处理。例如，设置用于组件渲染或更新所需要的数据。回调函数中的 response 是一个对象，该对象常用的属性是 data 和 status ，前者用于获取服务端返回的响应数据，后者是服务端发送的 HTTP 状态代码。response 对象的完整属性如下：

{
  // data 是服务器返回的响应数据
  data:{},

  // status 是 服务器响应的 HTTP 状态码
  status:200,

  // statusText 是服务器响应的 HTTP 状态描述
  statusText:'OK',
    
  // headers 是服务器响应的消息报头
  // 所有报头的名字都是小写的，可以使用方括号来访问
  // 例如：response.headers['content-type']
  headers:{},

  // config 是为请求提供的配置信息
  config:{},

  // request 是生成此响应的请求
  request:{}
}

成功响应后，获取数据的一般处理形式如下：

axios.get('/book?id=1').then(function(res){
  if(res.status === 200){
    this.book = res.data;
  }
}).catch(function(err){
  console.log(err)
})

如果出现错误，则会调用 catch() 方法中的回调，并向该回调函数传递一个错误对象。错误处理的一般形式如下：

axios.get('/book?id=1').catch(function(err){
  if(err.res){
    // 请求已发送并接收到服务端响应，但响应的状态码不是 2XX
    console.log(err.res.data);
    console.log(err.res.status);
    console.log(err.res.headers);
  }else if(err.req){
    // 请求已发送，但未接收到响应
    console.log(err.req)
  }else{
    // 在设置请求是出现问题而引发错误
    console.log('Error',err.message)
  }
  console.log(err.config)
})

15.3 axios API

可以通过想 axios 传递相关配置来创建请求。axios 原型如下：

axios(config)
axios(url[,config])

get 请求和 post 请求的调用形式如下：

// 发送 get 请求（默认的方法）
axios('/book?id=1')

// get 请求，获取远端的图片
axios({
  method:'get',
  url:'/image/logo.png',
  responseType:'stream'
}).then(function(res){
  res.data.pipe(fs.createWriteStream('logo.png'))
})

// 发送 post 请求
axios({
  method:'post',
  url:'/login',
  data:{
    username:'lisi',
    password:'1234'
  }
})

为了方便使用，axios 库为所有支持的请求方法提供了别名。如下：

• axios.request(config)
• axios.get(url[,config])
• axios.delete(url[,config])
• axios.head(url[,config])
• axios.options(rul[,config])
• axios.post(url[,config])
• axios.put(url[,data[,config]])
• axios.patch(url[,data[,config]])

在使用别名方法时，url、method 和 data 这些属性都不必在配置对象中指定。

15.4 请求配置

axios 库为请求提供了配置对象，在该对象中可以设置很多选项，常用的是 url、method、headers 和 params。完整的选项如下：

{
  // url 是用于请求的服务器 URL
  url:'/book',

  // method 是发起请求时使用的请求方法
  method:'get', // 默认的

  // baseURL 将自动加载 url 前面，除非 url 是一个绝对 URL
  // 为 axios 实例设置一个 baseURL,就可以将相对 URL 传递给该实例方法
  baseURL:'https://some-domain.com/api/',

  // transformRequest 允许在将请求数据发送到服务器前对其进行修改
  // 只能用于 put、post、patch 和 delete 这几个请求方法
  // 数组中的最后一个函数必须返回一个字符串、Buffer 的实例、ArrayBuffer、FromData 或 Stream
  // 也可以修改 headers 对象
  transformRequest:[function(data,headers){
    // 对 data 进行任意转换处理
    return data;
  }],

  // transformResponse 允许在将响应数据传递给 then/catch 之前对其进行更改
  transformResponse:[function(data){
    // 对 data 进行任意转换处理
    return data;
  }],

  // headers 是要发送的自定义请求头
  headers:{'X-Request-With':'XMLHttpRequest'},

  // params 是与请求一起发送的 URL 参数
  // 必须是一个普通对象（plain object）或 URLSearchParams 对象
  params:{
    ID:1
  },

  // paramsSerializer 是一个负责 params 序列化的可选函数
  // (e.g. https://www.npmjs.com/package/qs,http://api.jquery.com/jquery.param)
  paramsSerializer : function(params){
    return Qs.stringify(params,{arrayFormat:'brackets'})
  },

  // data 是作为请求体被发送的数据
  // 只适用于请求方法 put 、post、delete、patch
  // 在没有设置 transformRequest 时，必须是以下类型之一
  // -string、plain object、ArrayBuffer、ArrayBufferView、URLSearchParams
  // -浏览器专属：FromData、File、Blob
  // -Node 专属：Stream、Buffer
  data:{
    firstName:'Fred'
  },

  // 将数据发送到请求体的替代语法
  // 只适用于 Post 方法
  // 只发送值，而不发送键
  data:'Country=Brasil&City=Belo Horizonte',

  // timeout 指定请求超时的毫秒数，默认是 0 ，表示无超时时间
  // 如果请求耗时超过了 timeout，则请求被终止
  timeout:1000,

  // withCredentials 表示跨域请求时是否需要使用凭证
  withCredentials:false, //默认的

  //adapter 允许自定义处理请求，以使测试更加容易
  // 返回一个 promise 并提供一个有效的响应
  adapter:function(config){
    // ...
  },

  // auth 表示应该使用 HTTP 基础验证，并提供凭证
  // 这将设置一个 Authorization 报头，覆盖使用 headers 设置的现有的 Authorization 自定义报头
  auth:{
    username:'zhangsan',
    password:'123'
  },

  // responseType 表示服务器响应的数据类型
  // 可以是'arraybuffer'、'document'、'json'、'text'、'stream'
  // 浏览器专属：blob
  responseType:'json', //默认的

  // responseEncoding 表示用于解码响应数据的编码
  // 注意：对于 stream 响应类型，将被忽略
  responseEncoding:'utf8',  //默认的

  // xsrfCookieName 是用作 xsrf token 值的 cookie 的名称
  xsrfCookieName:'XSRF-TOKEN',  //默认的

  // onUploadProgress 允许为上传处理进度事件
  // 浏览器专属
  onUploadProgress:function(progressEvent){
    // 对原生进度事件的处理
  },

  // onDownloadProgress 允许为下载处理进度事件
  // 浏览器专属
  onUploadProgress:function(progressEvent){
    // 对原生进度事件的处理
  },

  // maxContentLength 定义 Node.js 中允许的响应内容的最大大小（以字节为单位）
  maxContentLength:2000,

  // maxBodyLength （只适用于 Node 的选项）定义允许的 HTTP 请求内容的最大大小（以字节为单位）
  maxBodyLength:2000,

  // validateStatus 定义对于给定的 HTTP 响应状态码是解析（resolve）还是拒绝（reject）这个
  // promise
  // 如果 validateStatus 返回 true （或者设置为 null 或 undefined）
  // promise 将被解析（resolve），否则，promise 将被拒绝（reject）
  validateStatus:function(status){
    return status >= 200 && status < 300; //默认的
  },

  // maxRedirects 定义在 Node.js 中 follow 的最大重定向数目
  // 如果设置为 0 ，那么将不会 follow 任何重定向
  maxRedirects:5,  //默认的

  // socketPath 定义要在 Node.js 中使用的 UNIX 套接字
  // 例如：'/var/run/docker.sock' 向docker 守护进程发送请求
  // 只能指定 socketPath 或 proxy ，如果两者都指定，则使用 socketPath
  socketPath:null,  //默认的

  // httpAgent 和 httpsAgent 用于定义在 Node.js 中执行 HTTP 和 HTTPS 时要使用的自定义代理
  // 允许配置类似 keepAlive 的选项，keepAlive 默认没有启用
  httpAgent:new http.Agent({keepAlive:true}),
  httpsAgent:new https.Agent({keepAlive:true}),

  // proxy 定义代理服务器的主机名和端口
  // auth 表示 HTTP 基础验证应当用于连接代理，并提供凭证
  // 这将会设置一个 Proxy-Authorization 报头
  // 覆盖使用 headers 设置的任何现有的自定义 Proxy-Authorization 报头
  proxy:{
    host:'127.0.0.1',
    port:9000,
    auth:{
      username:'aa',
      password:'bb'
    }
  },

  // cancelToken 指定用于取消请求的 cancel token
  cancelToken:new CancelToken(function(cancel){
    // ...
  })

  // decompress 表示是否应该自动解压响应正文
  // 如果设置为 true ，则还将从所有解压缩响应的 responses 对象中删除 content-encoding 报头
  // - Node 专属（浏览器的 XMLHttpRequest 无法关闭解压缩）
  decompress:true //默认的
}

15.5 并发请求

有时需要向服务器发起多个请求，这可以用 Promise.all 实现。
例如：

function getUserAccount(){
  return axios.get('/user/12345');
}

function getUserPermissions(){
  return axios.get('/user/12345/permissioins');
}

Promise.all([getUserAccount(),getUserPermissions()]).then(function (results)){
  // 两个请求现在都执行完成
  const acct = results[0];
  const perm = results[1];
  // acct 是 getUserAccount() 方法请求的响应结果
  // perm 是 getUserPermissions() 方法请求的响应结果
}