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下面的函数里

  1  reg () {
  3         axios({
  4           url: ` `,
  5           method: 'GET',//默认就是get请求，这个可以不写
  6           params: {
  7             a: 1,
  8             b: 2
  9           }
 10         }).then( res => {
 11           console.log( res )
 12         }).catch( err => console.log( err ))
 13       }

或者

  1  axios.get('./mock/data/data.json')
  2           .then( res => {
  3             console.log( res )
  4           })
  5           .catch( err => console.log( err ))
  6       }

 

有参数：

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

get请求携带参数用params

(2)post请求

post请求必须先设置请求头

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

 

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

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


三、封装

  1 /*
  2   封装一下axios
  3     ! 它是一个函数，因为它要携带参数
  4 */
  5 
  6 
  7 function request ({
  8   url,
  9   method = 'get' || 'GET',
 10   headers,
 11   params,
 12   data,
 13   baseURL,
 14   auth,
 15   withCredentials = false
 16 }) {
 17   axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
 18   // axios.defaults.headers.token = 'sdfsdfs' 
 19   axios.defaults.baseURL = baseURL
 20   return new Promise(function ( resolve,reject ) {
 21     console.log('method',method)
 22     switch ( method ) {
 23       case 'get' || 'GET':
 24         axios({
 25           url,
 26           params,
 27         }).then( res => resolve( res ))
 28           .catch( err => reject( err ))
 29         break;
 30       case 'POST':
 31         console.log('post - p')
 32         const p = new URLSearchParams()
 33         // data  {a:1,b:2}
 34         if ( data ) {//data存在，那么我们才遍历，不存在，那么我们不遍历
 35           for( let key in data ) {
 36             p.append( key, data[ key ] )
 37           }
 38         }
 39         axios({
 40           url,
 41           data: p,
 42           method,
 43           auth,//针对登录做判断，判断这个用户是普通用户还是超级管理员
 44           withCredentials//这个请求是否具有跨源的凭证
 45         }).then( res => resolve( res ))
 46           .catch( err => reject( err ))
 47         break;
 48       case 'PUT':
 49           axios({
 50             url,
 51             params,
 52             method
 53           }).then( res => resolve( res ))
 54             .catch( err => reject( err ))
 55         break;
 56       case 'DELETE':
 57           axios({
 58             url,
 59             params,
 60             method
 61           }).then( res => resolve( res ))
 62             .catch( err => reject( err ))
 63         break;
 64 
 65       default:
 66         break;
 67     }
 68   })
 69 }
 70 
 71

 

 

posted @ 2019-10-21 22:27  大把小米  阅读(474)  评论(0)  编辑  收藏  举报