Vue使用Axios小结 模拟form表单提交

1、安装axios

npm install axios

2、引入axios

import axios from 'axios'
import Qs from 'qs'

3、定义request.js

// create an axios instance
const service = axios.create({
  baseURL: process.env.BASE_API, // api的base_url
  timeout: 5000 // request timeout
})

// 设置请求拦截器
service.interceptors.request.use(config => {
  // 参数转换为表单模式
 if (config.data) {
    config.data = Qs.stringify(config.data)
  }
  // 设置请求头
  config.headers = {
    'Content-Type': 'application/x-www-form-urlencoded', // 模拟form表单方式提交请求
    'Access-Token': store.getters.token === undefined ? '' : store.getters.token() // 设置token
  }
  return config
}, error => {
  console.log(error) // for debug
  Promise.reject(error)
})

// 设置响应拦截器
service.interceptors.response.use(
  response => response,
  error => {
    console.log('err' + error) // for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  })

export default service

4、使用

import request from 'request'
export function fetchList(query) {
  return request({
    url: '/article/list',
    method: 'get',
    data: query
  })
}

import { fetchList } from '@/api/article'

methods: {
    getList() {
      this.listLoading = true
      fetchList(this.listQuery).then(response => {
        this.list = response.data.items
        this.total = response.data.total
        this.listLoading = false
      })
    }
  }