axios模拟POST请求(分开写利于维护)

1、axios.js文件如下:
import axios from 'axios'
export const instance = axios.create({

  // basic url
  baseURL: 'http://192.166.0.132:9999/txapi',

  // 如果请求的时间超过'timeout' 请求将被中止
  timeout: 3000,

  // withCredentials '是否跨站点访问控制请求'
  //withCredentials: true,

  //headers: { 
        "Content-Type": "application/x-www-form-urlencoded", 
        "Access-Token": "84c6635800b14e0eba4f7ece65e095a1" 
    }
  headers: { "Content-Type": "application/x-www-form-urlencoded" },  
  // 1、要设置请求方式为:application/x-www-form-urlencoded

})

2、api.js文件如下:
// 这个是我们后面新建的axios.js
import {instance} from './axios.js'
import qs from 'qs'

export function getMessage (param) {
  return instance({
    method: 'GET',
    url: '/storage',
    params: param
  })
}

export function addMessage (param) {
  return instance({
    method: 'POST',
    url: '/storage/',
    // 一开始我是这么写的,post里面的数据放在params里面,这样是有问题的,在使用axios时
    // 要注意到配置选项中包含params和data两者,以为他们是相同的,实则不然。因为params是
    // 添加到url的请求字符串中的,用于get请求。而data是添加到请求体(body)中的, 用于post请求。
    // params: param
    data: qs.stringify( param )   //意思就是:分离写时POST要用data,GET要用params
  })
}

3、Test.vue文件如下:





 

你可能感兴趣的:(vue)