vue中axios设置表单头_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

})

}

}