Axios请求用法

Axios请求用法

**
常见的配置选项

• 请求地址 url: ‘/user’,
  请求类型 method: ‘get’,
  请根路径 baseURL: ‘http://www.mt.com/api’,
  请求前的数据处理 transformRequest:[function(data){}],
  请求后的数据处理 transformResponse: [function(data){}],
  自定义的请求头 headers:{‘x-Requested-With’:‘XMLHttpRequest’},
  URL查询对象 params:{ id: 12 },
  查询对象序列化函数 paramsSerializer: function(params){ }
  request body data: { key: ‘aa’},
  超时设置 timeout: 1000,
  跨域是否带Token withCredentials: false,
  自定义请求处理 adapter: function(resolve, reject, config){},
  身份验证信息 auth: { uname: ‘’, pwd: ‘12’},
  响应的数据格式 json / blob /document /arraybuffer / text / stream responseType: ‘json’,

get请求

传参数法1：

传参数法2：

post请求

带参数请求

方法1：

   this.axios({
      url: "/api/tranSta/transToStation/getMonthsAndCorp.do",
      method: "post",
      params: { months: "1,2,3,4,5,6,7,8,9,10,11,12", corps: "公司1,公司2" },
    }).then(function(res){
        console.log(res)
});

方法2：

this.axios
      .post(
        "/api/tranSta/transToStation/getMonthsAndCorp.do?months=1,2,3,4,5,6,7,8,9,10,11,12&corps=公司1,公司2"
      )
      .then(function (res) {
        // console.log(res.data.infor)
      });

Body参数请求
(1)’Content-Type’=’multipart/form-data’
传参格式为formData
(全局请求头：’Content-Type’=’application/x-www-form-urlencoded’)
(request的Header:’Content-Type’: ’multipart/form-data’)

var forms = new FormData()
var mons = [1,2,3,4,5,6,7,8,9,10,11,12]
forms.append('months',mons)
forms.append('corp','公司1')
this.axios({
url:'/api/tranSta/transToStation/getMonths.do',
method:'post',
data:forms
}).then(function(res){
    console.log(res.data)

2)’Content-type’=’application/x-www-form-urlencoded’
传参格式qurey形式，使用qs.stringify
(全局请求头:’Content=Type‘=’application/x-www-form-urlencoded’)
(request的Header:’Content=Type:’application/x-www-form-urlencoded)

 this.axios({
      url:"http://10.39.7.136:28888/tranSta/transToStation/poemInfoInformation.do",
      method: "post",
      data: qs.stringify({ page: "1", size: "100" }),
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
    }).then(function (res) {
      console.log(res)})

3)’Content-Type’:’application/json’ 传参格式为raw(JSON格式)
（全局请求头：‘Contetn-type’:’application/x-www-form-urlencoded’）
(request的Header:’Content-Type’:’application/json.,charsert=’UTF-8’)

var data={'corp':'公司1','other':'2020-12'}
this.axios.post('/api/tranSta/transToStation/getByJSon.do',data)
.then(function(res){
  console.log(res)})

Axios并发请求

   var form = new FormData()
    var n1 = ['李白,杜.甫,陆游,苏轼,白居易']
    var n2 = ["春天","秋天","冬天","夏天"]
    form.append('authors',n1)
    form.append('seasons',n2)
        this.axios.all([this.axios.get('/api/tranSta/transToStation/selectAllInfo.do'),
        this.axios.post('/api/tranSta/transToStation/getSeasonInfo.do',form)]
        ).then(this.axios.spread((res1,res2)=>{
            console.log(res1.data)
            console.log(res2.data)
        }))

创建axios实例

为什么要创建axios的实例呢?
当我们从axios模块中导入对象时, 使用的实例是默认的实例
当给该实例设置一些默认配置时, 这些配置就被固定下来了.

const axiosInstance = this.axios.create({
    baseURL:'/api/tranSta/transToStation',
    timeout:'50000',
     
})
请求1
axiosInstance({
    url:"getMonthsAndCorp.do",
    method:'post',
    params: { months: "1,2,3,4,5,6,7,8,9,10,11,12", corps: "公司1,公司2" },
}).then(function(res){
    // console.log(res.data.infor)
})
请求2
axiosInstance({
    url:'getByJSon.do',
    data:{corp: "公司1", other: "2020-12"},
    method:'post'
}).then(function(res){
    console.log(res.data.infor)