axios封装和使用入门教程

Axios作为一个网络请求库，通常需要把axios进行封装方便使用，下面是axios封装和使用入门教程：

创建Axios实例

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

axios.create()里面可以不填写，或者根据你的实际情况填写。

Axios封装

新建一个libs/request.js文件：

import axios from 'axios'
const instance = axios.create()

// 添加请求拦截器
instance.interceptors.request.use(function(config) {
  // 在发送请求之前做些什么
  return Promise.resolve(config)
}, function(error) {
  return Promise.reject(error)
})

// 添加响应拦截器
instance.interceptors.response.use(function(response) {
  // 对响应数据做点什么
  return Promise.resolve(response)
}, function(error) {
  // 对响应错误做点什么
  return Promise.reject(error)
})

export default instance

上面会用到最基本的Axios拦截器：instance.interceptors对请求、响应做出拦截处理，以便于在请求接口是做拦截。

Axios使用

完成封装时候，开始使用，先新建API请问的接口文件，把所有的api分类别放入文件中，然后调用，如：api/index.js，当然也可以是其他文件，比如如果是用户相关的api，可以类型新建api/user.js这样的文件。

API

api/index.js:

import request from '@/libs/request'
export function queryTable(params) {
  return request({
    url: 'https://proapi.azurewebsites.net/api/rule',
    method: 'get',
    params
  })
}

使用API做业务请求

在vue文件中，先要引入api：

import { queryTable } from '@/api'

然后是业务代码：

export default {
  name: 'ArticleList',
  data() {
    return {
      list: null,
      table: {
        column: [
          {
            prop: 'key',
            label: 'Key'
          },
          {
            prop: 'name',
            label: '规则名称'
          },
          {
            prop: 'desc',
            label: '描述'
          },
          {
            prop: 'owner',
            label: '所有者'
          },
          {
            prop: 'progress',
            label: '进度'
          },
          {
            prop: 'createdAt',
            label: '创建时间'
          },
          {
            prop: 'updatedAt',
            label: '更新时间'
          },
          {
            prop: 'status',
            label: '状态'
          },
          {
            prop: 'disabled',
            label: '可用'
          }
        ]
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      queryTable({current:1,pageSize:10}).then(response => {
        // 请求判断
        if (response.status == '200') {
          this.list = response.data
        }
      })
    }
  }
}

以上就是一个比较基础的axios封装和使用入门教程。