axios模块

封装了网络请求的基础模块：XHR 或 fetch.

由于原生Ajax请求代码较为复杂，所以经常会封装后进行使用：

1、jQuery

$.get()

$.post()

$.ajax({

       url : ,

       method:,

       success: (res)=>{

                           ......

              }

 })

 ....

 简化了原生发送请求时的代码量，抹平了一些技术细节与浏览器兼容性问题。

2、axios：一款专业的用promise封装而来的网络请求库。API更加简洁

axios的官方网址：http://www.axios-js.com/

安装axios

基于脚手架项目，安装axios模块，需要在项目的根目录下执行命令：

npm install axios

npm i axios

基于axios发送get请求

方式1：axios.get(url)

// 引入axios

import axios from 'axios'

// 调用get方法发送get请求

let url = 'http://ip:port/api?name=zs&pwd=1234'

axios.get(url).then(res=>{

// .then()中的回调方法，将会在请求成功，获取响应后自动执行

// res就是请求成功后，axios封装的响应数据对象

}).catch(err=>{

// 如果请求失败，执行catch中的回调方法

})

方法2：axios(url)

    axios(url).then(res=>{

      // res就是请求成功后，axios封装的响应数据对象

    }).catch(err=>{

      // 如果请求失败，执行catch中的回调方法

    })

方法3：axios.create( ).get ( )

 let instance = axios.create()

instance({

  url:'请求地址',

  methods:'get',

  params:{

    page:1,

    pagesize: 5

  }

}).then(res=>{ 获取响应结果res })

案例：

 基于axios 发送 post 请求

方式1：

方式2：

 方式3：用 qs 模块进行post传参

原理：把 objec t转 formdata 格式字符串的模块：qs。

安装 qs 模块命令：npm  i  qs

调用方法：

import  qs  from  ' qs ' 

qs . stringify ( { name : ' zs ' ,  pwd : ' 1234 ' } )   ->  " name = zs & pwd = 1234 "

 至此发现：使用axios发送get请求，与发送post请求的API设计的不太一致，导致以后调用时增加开发成本，所以 工程化开发时通常情况下需要自己封装一个新的 axios ，设计一些用着舒爽的 API ，增加代码复用性与可维护性。

案例：

封装Axios

 无论发送get与post，不用写太多代码，简单的调用get 、 post方法，传url与对象参数即可完成请求的发送与响应的接收。

如下调用：

 封装代码：写在src下新建http文件下，文件名命名为MyAxios.js

import axios from 'axios'
const instance = axios.create()  //创建axios 实例
import qs from 'qs'

const myaxios = {
    
    /*
    用于发送get 请求
    url：请求资源路径
    params：请求参数（Object形式）
    */
    get(url,params){
        return instance({
            url,
            method:'get',
            params
        })
    },

    /* 用于发送post请求
       url ：请求资源路径
       params：请求参数（Object）

    */
    post(url,params){
        return instance ({
            url,
            method: 'post',
            data: qs.stringify(params)
        })
    }
}

export default myaxios

在vue文件中的使用：