Axios笔记

1. 环境配置
   安装好npm+webpack+axios
   npm init --y
npm i webpack webpack-cli -D
npm i axios -S
   -S 生产环境
   -D 开发环境

2. 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 () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

为自定义axios实例添加拦截器

const instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});

7. 请求配置

{
    //url用于请求的服务器url具体地址
    url:"/user",
    method:'get',
    //baseUrl会自动添加到url前面，除非url是一个绝对地址
    baseURL:'https://www.baidu.com/',
    //允许在想服务器发送数据之前对数据进行处理，修改
    transformRequest:[function(data){
        return data;
    }],
    //允许在请求返回的data数据传递给then或者catch之前，对数据进行处理，修改
    transformResponse:[function(data){
        return data;
    }],
    //自定义请求头
    header:{
        'X-Requested-With':'XMLHttpRequest'
    },
    //添加在URL中发送的参数
    params:{
        id:158
    },
    //序列化params
    paramsSerializer:function(params){
        return params
    }，
    data:{},
    //请求超时设置
    timeout:100,
    //跨域请求时是否需要使用凭证
    //允许自定义处理请求，测试使用
    adapter:function(config){},
    //在验证，应该使用HTTP基础验证，并提供凭据
    auth:{
        username:"",
        password:""
    },
    responseType:"",
    //xsrfCookingName用作XSRF-TOKEN的cookie名称，不是很理解
    xsrfCookingName:"XSRF-TOKEN",
    xsrfHeaderName:"XSRF-TOKEN",
    //允许为上传处理进度事件
    onUploadProgress:function(){},
    //允许为下载处理进度事件
    onDownloadProgress:function(){},
    maxContentLength:2000, //响应内容最大尺寸
    //定义对于给定的HTTP 响应状态码是 resolve 或 reject  promise 。如果 `validateStatus` 返回 `true` (或者设置为 `null` 或 `undefined`)，promise 将被 resolve; 否则，promise 将被 rejecte
    validateStatus: function(status){
        return
    },
    maxRedirects:5 ,//最大重定向数量
    //分别在node.js中用于定义在执行http和https时使用的自定义代理
    httpAgent:new http.Agent({keepAlive: true}),
    httpsAgent: new https.Agent({keepAlive: true}),
    proxy:{
        host:"192.168.0.1",
        port: 8080,
        auth:{
        username:"",
        password:"" 
    },
    //指定用来取消请求的cancel token
    cancelToken:new CancelToken(function(cancel){})
}