axios请求总结

axios是第三方封装库，作用是在框架中使用数据请求

文档说明地址：https://www.npmjs.com/package/axios

安装：

(1)npm

$ npm install axios –S

(2)CDN     

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

特点：

- 1. 它在浏览器中创建的是浏览器对象

- 2. 它底层是用Node.js中的http模块实现的

- 3. 支持Promise

- 4. 可以拦截请求和响应

      功能： loading加载效果、登录拦截

- 5. 转换请求和响应数据

- 6. 自动转换为JSON数据

- 7. 客户端支持防止XSRF 

- 8. axios会自动封装数据

 

使用：

一、模拟数据

1.Mock模拟数据的请求 

(1)mock.js生成(在mock 目录)

(2)线上拷贝

(3)线上的 http://jsonplaceholder.typicode.com/

2.后端接口的请求

后端渲染模板：https://www.showdoc.cc/

二、发送请求

(1)get请求

无参数：

axioa写在vue里面的methods下面的函数里

 reg () {
        axios({
          url: ` `,
          method: 'GET',//默认就是get请求，这个可以不写
          params: {
            a: 1,
            b: 2
          }
        }).then( res => {
          console.log( res )
        }).catch( err => console.log( err ))
      }

或者

 axios.get('./mock/data/data.json')
          .then( res => {
            console.log( res )
          })
          .catch( err => console.log( err ))
      }

 

有参数：

 axios.get(`${ DEV_BACK_URL }/shop`,{
          params: { //get请求携带参数
            a: 1,
            b: 2
          }
        }).then( res => {
          console.log( res )
        }).catch( error => console.log( error ))

get请求携带参数用params

(2)post请求

post请求必须先设置请求头

  /* 统一设置post请求头 */
  axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
  new Vue({

 

const p = new URLSearchParams() //得到参数携带对象
        // p.append( 参数，参数值 )
        p.append( 'username','张骏' )
        p.append( 'password','123' )
        p.append( 'name','骏哥' )
        axios({
          url: `${ DEV_BACK_URL }/register`,
          data: p,// post请求携带参数的配置项
          method: 'POST',
          withCredentials: true,
        }).then( res => console.log( res ))
          .catch( err => console.log( err ))

post请求携带参数的用data，用p.append添加参数

三、封装

/*
  封装一下axios
    ! 它是一个函数，因为它要携带参数
*/


function request ({
  url,
  method = 'get' || 'GET',
  headers,
  params,
  data,
  baseURL,
  auth,
  withCredentials = false
}) {
  axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
  // axios.defaults.headers.token = 'sdfsdfs' 
  axios.defaults.baseURL = baseURL
  return new Promise(function ( resolve,reject ) {
    console.log('method',method)
    switch ( method ) {
      case 'get' || 'GET':
        axios({
          url,
          params,
        }).then( res => resolve( res ))
          .catch( err => reject( err ))
        break;
      case 'POST':
        console.log('post - p')
        const p = new URLSearchParams()
        // data  {a:1,b:2}
        if ( data ) {//data存在，那么我们才遍历，不存在，那么我们不遍历
          for( let key in data ) {
            p.append( key, data[ key ] )
          }
        }
        axios({
          url,
          data: p,
          method,
          auth,//针对登录做判断，判断这个用户是普通用户还是超级管理员
          withCredentials//这个请求是否具有跨源的凭证
        }).then( res => resolve( res ))
          .catch( err => reject( err ))
        break;
      case 'PUT':
          axios({
            url,
            params,
            method
          }).then( res => resolve( res ))
            .catch( err => reject( err ))
        break;
      case 'DELETE':
          axios({
            url,
            params,
            method
          }).then( res => resolve( res ))
            .catch( err => reject( err ))
        break;

      default:
        break;
    }
  })
}