axios

---

1 axios概述

      Axios 基于 Promise 的 http 库,可以用在浏览器和 node.js 中。

2 axios特性

      (1) 从浏览器中创建 XMLHttpRequests
      (2) 从 node.js 创建 http 请求
      (3) 支持 Promise API
      (4) 拦截请求和响应
      (5) 转换请求数据和响应数据
      (6) 取消请求
      (7) 自动转换 JSON 数据
      (8) 客户端支持防御 XSRF

    (一) 默认情况下，Content-Type：application/json

  默认将请求体中的参数转码成json类型数据
  发送表单类型数据
    axios({
      url,
      method,
      data: qs.stringify(data)
    })
  发送json类型数据
    axios({
      url,
      method,
      data: {
        username: 'admin1',
        password: '123321'
      }
    })

   Restful风格
      常用的HTTP动词有下面五个（括号里是对应的SQL命令）
        GET（SELECT）：从服务器取出资源（一项或多项）。
        POST（CREATE）：在服务器新建一个资源。
        PUT（UPDATE）：在服务器更新资源（客户端提供改变后的完整资源）。
        PATCH（UPDATE）：在服务器更新资源（客户端提供改变的属性）。
        DELETE（DELETE）：从服务器删除资源。
      还有两个不常用的HTTP动词。
        HEAD：获取资源的源数据。
        OPTIONS：获取信息，关于资源的哪些属性是客户端可以改变的。
      下面是一些例子
        GET /zoos：列出所有动物园
        POST /zoos：新建一个动物园
        GET /zoos/ID：获取某个指定动物园的信息
        PUT /zoos/ID：更新某个指定动物园的信息（提供该动物园的全部信息）
        PATCH /zoos/ID：更新某个指定动物园的信息（提供该动物园的部分信息）
        DELETE /zoos/ID：删除某个动物园
        GET /zoos/ID/animals：列出某个指定动物园的所有动物
        DELETE /zoos/ID/animals/ID：删除某个指定动物园的指定动物

   (二) 简写形式

   参数以查询字符串格式拼接到URL
	  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]])

    (三) 默认配置

 axios.defaults.baseURL = 'http://...'  // 设置默认的请求基路径
 axios.defaults.headers.common['Authorization'] = token  // 为所有的请求统一设置
 axios.defaults.headers.get['Authorization'] = token   // 为所有的get请求统一设置
 axios.defaults.headers.post['Authorization'] = token  // 为所有的post请求统一设置

3 拦截器

       在请求或响应被 then 或 catch 处理前拦截它们。一般可以用于对登录后获得的令牌 token 进行处理。

3.1请求拦截器

	// 添加请求拦截器
	axios.interceptors.request.use(function (config) {
		// 在发送请求之前做些什么，可以处理数据格式或者对某些请求url做特殊处理
		if (config.method == 'post' && config.url !== '/user/login') {
			// 表单数据
			config.data = qs.stringify(config.data);
		} 
		return config;
	}, function (error) {
		// 对请求错误做些什么
		return Promise.reject(error);
	});

3.2 响应拦截器

	// 添加响应拦截器
	axios.interceptors.response.use(function (response) {
		// 对响应数据做点什么
		let res = {
			...response,
			data: response.data.data,
			status: response.data.status,
			statusText: response.data.message,
		};
		// return response;
		return res;
	}, function (error) {
		// 对响应错误做点什么
		return Promise.reject(error);
	});

3.3 移除拦截器

   let interceptor = axios.interceptors.response.use((response) => {
      // 做响应结果的拦截处理
      return response
    },(error) => {
      return Promise.reject(error)
    })
    // 超时调用
    setTimeout(() => {
      // 移除拦截器
      axios.interceptors.response.eject(interceptor)
    }, 3000)

4 axios创建实例

     创建多个连接实例，用于解决同一项目，请求多个服务器的业务场景。

   let instance1 = axios.create({
      // 创建时可以传递默认配置
      baseURL: 'http://47.101.183.106:7788',
      headers: {
        'Authorization': 'token'
      }
    })
    let instance2 = axios.create({
      baseURL: 'http://47.101.183.106:8888',
      headers: {
        'Contene-Type': 'application/x-www-form-urlencoded'
      }
    })
  调用实例
    instance1({
      method: 'post',
      url: '/user/login',
      data: loginData
    }).then(res => {
      console.log(res);
    })

    instance2({
      method: 'get',
      url: '/category/findAll',
    }).then(res => {
      console.log(res);
    })

5 axios封装

5.1 axios封装

	// 1.设置全局默认配置项
	axios.defaults.baseURL = 'http://47.101.183.106:8888'
	// 2.设置请求拦截器
	axios.interceptors.request.use(config => {
	  // Do something before request is sent
	  let token = sessionStorage.getItem('token')
	  if (config.url != '/user/login' && token) {
	    config.headers['Authorization'] = token
	  }
	  return config;
	}, error => {
	  // Do something with request error
	  return Promise.reject(error);
	});
	// 3.设置响应拦截器
	axios.interceptors.response.use(response => {
	  // Do something before response is sent
	  response = {
	    ...response,
	    data: response.data.data,
	    status: response.data.status,
	    statusText: response.data.message
	  }
	  return response;
	}, error => {
	  // Do something with response error
	  return Promise.reject(error);
	});
	
	let qs = Qs
	// 4.封装请求方法
	function post_form (url, data) {
	  return axios({
	    url,
	    method: 'post',
	    data: qs.stringify(data),
	    headers: {
	      'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
	    }
	  })
	}

5.2 axios封装的使用

 <script src="../js/axios.js"></script>
  <script src="../js/qs.js"></script>
  <script src="./7-axios封装.js"></script>
  <script>
    axios.post('/user/login', {
      username: 'admin1',
      password: 123321
    }).then(res => {
      if (res.status != 200) {
        console.error(res.statusText)
        return false
      }
      sessionStorage.setItem('token', res.data.token)
    }).catch(error => {
      console.log('失败', error);
    })
    axios.get('/index/category/findAll').then(res => {
      console.log(res.data);
    })
    post_form('/category/saveOrUpdate', {
      name: '体坛赛事'
    }).then(res => {
      console.log(res.statusText);
    })
  </script>

6 ajax

6.1 原生ajax

    默认情况下，Content-Type:text/plain
    发送表单类型数据
      xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
      xhr.send(qs.stringify(data))
    发送json类型数据
      xhr.setRequestHeader('Content-Type', 'application/json')
      xhr.send(JSON.stringify(data))

      具体实现：

  <script src="../js/qs.js"></script>
  <script>
    const qs = Qs
    const baseUrl = 'http://47.101.183.106:8888'
    const queryData = {
      page: 1,
      pageSize: 10
    }
    const loginData = {
      username: 'admin1',
      password: 123321
    }
    const applyData = {
      name: 'tom',
      age: 12,
      telephone: 12345678987,
      gender: 'male'
    }
    // 1.实例化http请求对象
    let xhr = new XMLHttpRequest()
    // 2.打开连接，设置请求的配置参数
    //查询
    // xhr.open('get', baseUrl + '/index/category/findAll')
    // const qsData = qs.stringify(queryData)
    // xhr.open('get', baseUrl + '/index/article/pageQuery' + '?' + qsData)
    // xhr.open('post', baseUrl + '/user/login')
    // xhr.setRequestHeader(
    //   'Content-Type',
    //   'application/json'
    // )
    //登录
    xhr.open('post', baseUrl + '/user/login')
    xhr.setRequestHeader(
      'Content-Type',
      'application/x-www-form-urlencoded'
    )
    // 3.发送请求并且配置请求体中的参数
    // xhr.send(JSON.stringify(loginData))
    xhr.send(qs.stringify(applyData))
    // 4.监听http连接状态的改变，获取响应
    xhr.onreadystatechange = () => {
      if (xhr.readyState == 4 && xhr.status == 200) {
        console.log(JSON.parse(xhr.response));
      }
    }
  </script>

6.2 jquery的ajax

       默认情况下，Content-Type：application/x-www-form-urlencoded
       默认情况下，参数会被默认转换成表单格式数据

	发送表单类型数据
	  $.ajax({
	    url,
	    method,
	    data: data
	  })
	发送json类型数据
	  $.ajax({
	    url,
	    method,
	    headers: {
	      'Content-Type': 'application/json'
	    },
	    data: JSON.stringify(loginData)
	  })

      具体实现：

  <script src="../js/jquery.js"></script>
  <script src="../js/qs.js"></script>
  <script>
    const qs = Qs
    const baseUrl = 'http://47.94.46.113:8888'
    const queryData = {
      page: 1,
      pageSize: 10
    }
    const loginData = {
      username: 'admin1',
      password: 123321
    }
    const applyData = {
      name: 'tom',
      age: 12,
      telephone: 13455667788,
      gender: 'male'
    }
    $.ajax({
      url: baseUrl + '/index/category/findAll',
      method: 'get',
      success(res) {
        console.log(res);
      },
      error(error) {
        console.log(error);
      }
    })
    $.ajax({
      url: baseUrl + '/user/login',
      method: 'post',
      headers: {
        'Content-Type': 'application/json'
      },
      data: JSON.stringify(loginData),
      success(res) {
        console.log(res);
      },
      error(error) {
        console.log(error);
      }
    })
  </script>