Axios笔记

请求方法的别名
axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

impo
rt axios from "axios";

axios.get('http://api.eduwork.cn/admin/link?id=1').then(res=>{
    console.log(res);
}).catch(function (error) {
    console.log(error);
});

axios.get('http://api.eduwork.cn/admin/link', {params:{id:1}}).then(res=>{
    console.log(res);
});

axios.post('http://api.eduwork.cn/admin/link/add', "name=测试&url=eduwork&ord=5&do_submit=yes").then(res=>{
    console.log(res);    

参数配置

//默认get方法
axios('http://localhost/axios/getapi.php?name=zhangsan&age=19')
 .then(res=>{
     console.log(res);
     console.log(res.data)
 });

//上面的请求也可以这样做
axios({
      method:'get',
      url:'http://localhost/axios/getapi.php',
      params: {
          username:'zhangan',
          age:10,
          sex:'nan'
      }
  }).then(res=>{
      console.log(res);
  });

//post请求
  axios({
      method:'post',
      url:'http://localhost/axios/getapi.php',
      headers: {
          'content-type': 'application/x-www-form-urlencoded'
      },
      data: {
          username:'zhangan',
          age:10,
          sex:'nan'
      }
  }).then(res=>{
      console.log(res);
  });

3. 并发请求处理
   ajax请求过多对页面性能可能会有影响，以及代码不美观，代码过于臃肿，所以我们可以使用 axios的并发请求axios.all()

处理并发请求的助手函数：
axios.all(iterable)
axios.spread(callback)

axios.all([
    axios.get('http://api.eduwork.cn/admin/link?id=1'),
    axios.get('http://api.eduwork.cn/admin/link?id=7'),
    axios.get('http://localhost/axiosdemo/getapi.php?id=100')
]).then(res=>{
	//分别打印每个请求的返回响应
    console.log(res[0]);
    console.log('----------------');
    console.log(res[1]);
    console.log('----------------');
    console.log(res[2]);
}).catch(err=>{
    console.log("-------------error-----------");
    console.log(err);
});

//上面的打印代码还可以这样写
axios.all([
    axios.get('http://api.eduwork.cn/admin/link?id=1'),
    axios.get('http://api.eduwork.cn/admin/link?id=7'),
    axios.get('http://localhost/axiosdemo/getapi.php?id=100')
]).then(
	//分别打印每个请求的返回响应
    axios.spread((res1, res2, res3)=>{
        console.log(res1);
        console.log(res2);
        console.log(res3);
    })
).catch(err=>{
    console.log("-------------error-----------");
    console.log(err);
})；

4. 全局配置
   指定各个请求的配置默认值

全局的axios默认值

axios.defaults.baseURL="http://api.eduwork.cn/admin";
axios.defaults.timeout=3000;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

axios.get('link?id=8').then(res=>{
    console.log(res);
}).catch(err=>{
    console.log("--------error---------");
    console.log(err);
})

axios.post('link/add', "name=helloword&url=lmonkey&ord=5&do_submit=true").then(res=>{
    console.log(res);
}).catch(err=>{
    console.log("--------error---------");
    console.log(err);
})

5. axios实例封装
   有时候后台接口地址有多个并且超时时长不一样，我们不可能在axios中把每个后台请求的域名地址都拼接在URl中，并且在axios中的config写不同的超时时长，很繁琐，这个时候可以用到axios实例，在实例中可以配置这两种参数。
   可以使用自定义配置新建一个 axios 实例
   axios.create([config])

假如新建了一个axios实例但是没有参数，取得就是全局的配置值，实例中如果有则优先取实例中的。
实例的配置优先于全局配置

axios.defaults.baseURL="http://api.eduwork.cn/admin";
axios.defaults.timeout=3000;

let eduwork = axios.create({
    baseURL:"http://api.eduwork.cn/admin",
    timeout:5000
});

let local1 = axios.create({
    baseURL:"http://localhost/axiosdemo",
    timeout:3000
});

//使用了实例配置
eduwork.get('link?id=1').then(res=>{
    console.log(res);
}).catch(err=>{
    console.log("--------error---------");
    console.log(err);
})

local1.get('getapi.php?id=1000').then(res=>{
    console.log(res);
}).catch(err=>{
    console.log("--------error---------");
    console.log(err);
})

//使用全局配置
axios.get('link?id=8').then(res=>{
    console.log(res);
}).catch(err=>{
    console.log("--------error---------");
    console.log(err);
})

axios实例的相关配置（config参数）

• baseURL：请求的域名基本地址（如：http://localhost:8080）
• timeout：后端定义的超时时长（默认是1000ms） url：请求的路径（如：/data.json）
• method：请求方法（get、post…） headers：设置请求头 params：请求的参数拼接在url中
• data：请求的参数放在request body中

6. axios拦截器

// 请求拦截器
axios.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    // 每次发送请求之前判断是否存在token
    // 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况
    // 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断
    const token = window.localStorage.getItem("token");
    token && (config.headers.Authorization = token);
    return config;    //放行
},
  error => {
    //对请求错误做些什么
    return Promise.error(error);
  }
);

//响应拦截器
axios.interceptors.response.use(
  response => {
    // 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据
    // 否则的话抛出错误
    if (response.status === 200) {
      return Promise.resolve(response);
    } else {
      return Promise.reject(response);
    }
  },
  // 服务器状态码不是2开头的的情况
  // 这里可以跟后台开发人员协商好统一的错误状态码
  // 然后根据返回的状态码进行一些操作，例如登录过期提示，错误提示等等
  // 下面列举几个常见的操作，其他需求可自行扩展
  error => {
    if (error.response.status) {
        return Promise.reject(error.response);
    }
  }
);

移除拦截器

const myInterceptor = axios.interceptors.request.use(function () {/*...*