image.png

axios的基本使用

import Vue from 'vue'
import App from './App'
//使用之前要安装 npm install axios --save
import axios from "axios";
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  render: h => h(App)
});
axios({
  //默认 get方式
  methods:"get",
  url:"http://123.207.32.32:8000/home/multidata"
}).then(res=>{
  console.log(res);
});

axios({
  url:"http://123.207.32.32:8000/home/data",
  params:{
    type:"pop",
    page:1
  }
}).then(res=>{
  console.log(res);
});

2.axios发送并发请求

axios.all([axios({
  url:"http://123.207.32.32:8000/home/multidata"
}),axios({
  url:"http://123.207.32.32:8000/home/data",
  params:{
    type:"sell",
    page:3
  }
  }
)]).then(
  res=>{
    console.log(res);
    console.log(res[0]);
    console.log(res[1]);
  }
);
//方式二 ——展开
axios.all([axios({
  url:"http://123.207.32.32:8000/home/multidata"
}),axios({
    url:"http://123.207.32.32:8000/home/data",
    params:{
      type:"sell",
      page:3
    }
  }
)]).then(axios.spread((result1,result2)=>{
  console.log(result1);
  console.log(result2);
}));

image.png

全局配置

axios.defaults.baseURL="http://123.207.32.32:8000";
//单位是毫秒
axios.defaults.timeout=5000;
axios.all([axios({
  url:"/home/multidata"
}),axios({
    url:"/home/data",
    //如果请求方式为post  用请求体 data代替params
    params:{
      type:"sell",
      page:3
    }
  }
)]).then(axios.spread((result1,result2)=>{
  console.log(result1);
  console.log(result2);
}));

创建axios对应的实例

const axiosInstance = axios.create({
  baseURL:"http://123.207.32.32:8000",
  timeout:5000
});
axiosInstance({
  url:"/home/multidata"
}).then(res=>{
  console.log(res);
})

axiosInstance({
  url:"/home/data",
  params:{
    type:"sell",
    page:3
  }
}).then(res=>{
  console.log(res);
})

axios的封装调用

network/request.js

import axios from "axios";

export function request(config) {
  //1.创建axios实例
  const instance = axios.create({
    baseURL:"http://123.207.32.32:8000",
    timeout:5000
  });
  //2.axios的拦截器
  //2.1 请求拦截器
  instance.interceptors.request.use(config=>{
  //  进行操作
    return config;
  },error => {
  //  进行操作
    return error;
  });
  //2.2响应拦截器
  instance.interceptors.response.use(res=>{
    //进行操作
    return res;
  },error => {
    //进行操作
    return error
  });
  //3.发送真正的网络请求
  return instance(config)
}

调用

import {request} from "./network/request";
request({
  url:"/home/multidata"
}).then(res=>{
  console.log("axios的封装调用"+JSON.stringify(res));
},err=>{
  console.log(err);
});

同事的封装

import axios from axios;
export const postData = (company) => {
  let headers = {
    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
  }
  return axios.request({
    url: 'cev/commonData/',
    method: 'post',
    data: company,
    headers: headers,
    transformRequest: [function (data) {
      let ret =''
      for (let it in data) {
        ret += encodeURIComponent(it) + "="+ encodeURIComponent(data[it]) + "&"
      }
      return ret
    }],
  })
};

调用

import {postData} from ...;
  postData(condition).then(res => {
                    //操作
                }).catch(function (err) {
                    //操作
                })