Vue-Aixos

Axios

• npm install axios
• 在 main.js

import Axios from "axios";
Vue.prototype.$Axios = Axios;

5 种请求方法

• get =获取数据
• post = 提交数据（表单提交，文件上传） 一般用于新建、添加
• put = 更新数据（所有数据都推送到后端，后端更新数据库） 一般用于更新
• patch = 更新数据（只把修改的数据推送到后端，后端更新数据库）
• delete = 删除数据

get | post | put | patch | delete 请求

this.$Axios.get("/data.json").then(res => {
  console.log(res);
});

并发请求, 使用 axios.all 与 axios.spread 这 2 个 api 来进行 请求与处理数据

this.$Axios
  .all([this.$Axios.get("/data.json"), this.$Axios.get("/city.json")])
  .then(
    this.$Axios.spread((dataRes, cityRes) => {
      console.log(dataRes);
      console.log(cityRes);
      // 或者
      console.log(dataRes, cityRes);
    })
  );

Axios 参数配置

baseURL: "http://localhost:8080"; //请求的域名、基本地址
timeout: 1000; //请求超时时长 默认1000ms，一般后端定义
url: "/data.json"; //请求路径
method: "get、post、put、patch、delete"; //请求方法
headers: {
  token: "密钥之类";
} //设置请求头
params: {
} //请求参数拼接在url上
data: {
} //亲求参数放在请求体里

1、axios 全局配置

axios.defaults.timeout = 1000;
axios.defaults.baseURL = "http://localhost:8080";

2、axios 实例配置

let instance = axios.create();
instance.defaults.timeout = 3000;

3、axios 请求配置

instance.get("/data.json", {
  timeout: 5000
});

有优先级高-低:3-2-1

在实际开发过程中全局配置用的比较少

• 2 种请求接口:
• http:localhost:9090
• http:localhost:9091

	let instacne = axios.create({
    	baseURL:'http:localhost:9090'
        timeout:1000
    })
	let instacne1 = axios.create({
    	baseURL:'http:localhost:9091'
        timeout:3000
    })
//baseURL | timeout | url | method | params
instacne.get('/contactlist',{params{}).
then(res=>console.log(res))
//baseURL | timeout | url | method
instacne1.get('/orderList',{timeout:5000}).
then(res=>console.log(res))

Axios 拦截器

• 在请求或者响应被处理前拦截他们
• 请求拦截器 | 响应拦截器

请求拦截器

axios.interceptors.request.use(
  config => {
    //发送请求前，做些什么
    return config;
  },
  err => {
    //请求错误时，做些什么
    return Promise.reject(err);
  }
);

响应拦截器

axios.interceptors.response.use(
  response => {
    //发送成功对响应数据做出处理
    return response;
  },
  err => {
    //响应错误做些什么
    return Promise.reject(err);
  }
);
//这里return一个 response出来，带有then方法与数据。不理解可以去看下Promise
axios
  .get("/xxx")
  .then(res => console.log(res))
  .catch(err => console.log(err));

取消拦截器（了解即可）

let interceptors = axios.interceptors.request.use(config => {
  config.headers.auth = ture;
  return config;
});
// 取消
axios.interceptors.request.eject(interceptors);

case

• 微博评论，登录状态(token:'')

// 访问需要登录的接口
let instance = axios.create({});
instance.interceptors.request.use(config => {
  config.headers.token = "密钥token";
  return config;
});

• 微博你不登录，也是可以看别人的微博的

// 访问不需要登录的接口
let instance = axios.create({});
instance.get('/xxxx').then(res=>console.log(res));

• 移动端开发

let instance_phone = axios.create({});
instance_phone.interceptors.request.use(config => {
  //请求加载模态框
  $("#modal").show();
  return config;
});
instance_phone.interceptors.response.use(response => {
  //关闭模态框
  $("#modal").hide();
  return response;
});

错误处理-请求错误时进行对应的处理

axios.interceptors.request.use(
  config => {
    return config;
  },
  err => {
    return Promise.reject(err);
  }
);
axios.interceptros.response.uer(
  response => {
    return response;
  },
  err => {
    return Promise.reject(err);
  }
);
this.$Axios
  .post("/data.json")
  .then(res => {
    console.log(res);
  })
  .catch(err => {
    console.log(err);
  });

• 实际开发过程中，一般统一添加错误处理

let instance = axios.create({});
//  请求拦截
instance.interceptors.request.use(
  config => {
    return config;
  },
  err => {
    //请求错误 这里 http状态码 以4开头
    //401 超时
    //404 找不到
    // 模态框
    $("#Modal").show();
    setTimeout(function() {
      $("#Modal").hide();
    }, 2000);
    return Promise.reject(err);
  }
);
// 响应拦截
instance.interceptors.response.use(
  res => {
    return res;
  },
  err => {
    // 响应错误处理， http状态码 以5开头
    // 500 系统错误
    // 502 系统重启
    // 模态框
    $("#Modal").show();
    setTimeout(function() {
      $("#Modal").hide();
    }, 2000);
    return Promise.reject(err);
  }
);
// 请求案例
instance
  .get("/xxxx")
  .then(res => {
    console.log("请求成功");
  })
  .catch(err => {
    console.log("如果上面的弹窗还不够,需要特殊处理,那么我们在这里搞定");
  });

取消请求

用于取消正在进行的http请求（了解即可）
实际项目中，使用并不多

let source = axios.CancelToken.source();
axios.get('/xxx'{cancelToken:source.token}).
then(res=>console.log(res)).
catch(err=>console.log(err))
//取消请求(message可选)
source.cancel('cancel http')
//什么情况下使用取消请求
// CRM管理系统，大批量查询，响应需要3-5秒时间，这时候我不想查这个东西，我要查其他的了，就要取消请求了。节省资源