[JavaScript知识库]axios请求方法封装

axios 介绍

• axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中进行请求网站资源

axios 特性

• 从浏览器中创建 XMLHttpRequest?对象
• 从 Node.js 创建 http 请求，Node.js 是一个基于 Chrome V8 引擎的 JS 运行环境
• 支持 Promise API
• 拦截请求和响应
• 转换请求数据和响应数据
• 取消请求
• 自动转换 JSON 数据
• 客户端支持防御 XSRF?

axios 安装

npm install -S axios

axios 执行 get 请求

• 方式一：直接在请求地址后面拼接参数

async getData(){
  const url = 'http://jsonplaceholder.typicode.com/todos?id=1&id=2&id=3'
  const { data } = await axios.get(url)
  console.log(data)
}

• 方式二：请求参数是一个对象，对象里面放着一个 params 请求参数对象

async getData(){
  const url = 'http://jsonplaceholder.typicode.com/todos'
  const params = { id: [1, 2, 3, 4] } // 查询多条数据，查询一条数据 id: 1
  const { data } = await axios.get(url, { params })
  console.log(data)
  this.list = data
}

• 上面 2 种方式也可以使用 Promise 对象实现

axios 执行 post 请求

• 方式一：带参数发送，参数直接放在一个对象里

async getData(){
  axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }).then(res => {
    console.log(es)
  }).catch(err => {
    console.log(err)
  })
}

• 方式二：执行多个并发请求

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

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

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // 两个请求现在都执行完成
  }))

axios API

• axios(config)，可以通过向 axios 传递相关配置来创建请求

// 发送 POST 请求
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

// 获取远端图片
axios({
  method:'get',
  url:'http://bit.ly/2mTM3nY',
  responseType:'stream'
}).then(function(response) {
  response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
})

创建 axios 实例

• axios.create([config])

const instance = axios.create({
  // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
  // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL  
  baseURL: 'https://some-domain.com/api/',
  // `timeout` 指定请求超时的毫秒数(0 表示无超时时间)
  // 如果请求超过 `timeout` 的时间，请求将被中断  
  timeout: 1000,
  // `headers` 是即将被发送的自定义请求头
  headers: {'X-Custom-Header': 'foobar'}
})

axios 配置默认值

• 全局 axios 默认值

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN; // Authorization 授权、许可; auth 认证
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

• 自定义实例默认值

// Set config defaults when creating the instance
const instance = axios.create({
  baseURL: 'https://api.example.com'
});

// Alter defaults after instance has been created
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

axios 请求方法封装

import axios from 'axios'

const instance = axios.create({
  baseURL: process.env.BASE_API, // api 的 base_url
  withCredentials: true, // 跨域请求时是否需要使用凭证
  timeout: 15000 // 超时设置
})

// 请求拦截器
instance.interceptors.request.use(config => {
  // 在发送请求之前做些什么，比如请求头携带内容
  config.headers['Content-Type'] = 'application/json; charset=utf-8';
  // config.headers['token'] = 'token123'
  return config;
}, error => {
  // 对请求错误做些什么
  return Promise.reject(error);
})

// 响应拦截器
instance.interceptors.response.use(res => {
  // 对响应数据做点什么，比如 token 过期处理
  if (res.data.status == 401) {
    alert('暂无权限，请重新登录!');
    window.location.href = '/login';
    return false;
  }
  return res;
}, error => {
  // 对响应错误做点什么
  switch (error && error.response && error.response.status) {
    case 400:
      error.message = '请求错误'
      break
    case 401:
      error.message = '未授权，请登录'
      break
    case 403:
      error.message = '拒绝访问'
      break
    case 404:
      error.message = '未找到访问地址'
      break
    case 408:
      error.message = '请求超时'
      break
    case 500:
      error.message = '服务器内部错误'
      break
    case 501:
      error.message = '服务未实现'
      break
    case 502:
      error.message = '网关错误'
      break
    case 503:
      error.message = '服务不可用'
      break
    case 504:
      error.message = '网关超时'
      break
    case 505:
      error.message = 'HTTP版本不受支持'
      break
    default:
  }
  return Promise.reject(error);
})

export default instance

axios 请求方法使用

<template>
  <div class="hello">
    <ul>
      <li v-for="item in list" :key="item.id">{{item.title}}</li>
    </ul>
  </div>
</template>

<script>
import api from "@/provider/axios.js";

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data(){
    return {
      list: []
    }
  },
  created(){
    this.getData()
  },
  methods: {
    async getData(){
      const { data } = await api.get('http://jsonplaceholder.typicode.com/posts')
      this.list = data
      console.log(this.list)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
</style>

axios中文文档|axios中文网 | axios欢迎使用 axios，本文档将帮助您快速上手。(troubleshooting.html) 中的解答， 什么是 axios？Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 axios Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 特性 从浏览器中创建 XMLHttpRequests 从 nodehttp://www.axios-js.com/zh-cn/docs/

自定义封装axios方法总结 - 掘金axios官网。 axios是基于Promise的一款http客户端工具，用于在游览器和nodejs环境中进行请求网站资源。 如果你只在游览器使用，可以下载到本地或者使用cdn。 推荐配合await这种方法使用。 有时候对于一些要求比较少的网站应用来说，是一个不错的选择，但是对…https://juejin.cn/post/6844903890756845575