axios模块

Rolise-hush

已于 2022-11-09 11:29:05 修改

阅读量586

点赞数

分类专栏： Vue 文章标签： javascript jquery 前端

于 2022-11-07 20:47:54 首次发布

本文链接：https://blog.csdn.net/HushPlot/article/details/127726743

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

封装了网络请求的基础模块：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 })

案例：

<template>
  <div>
    <input type="text" placeholder="请输入查询关键字">
    <button>点我模糊查询电影列表</button>
    <br><br>
    <button @click="getMovies">发送请求：访问上映电影</button>
  <table style="width:1000px, margin: 0px auto;" >
    <thead>
      <tr>
        <td>封面</td>
        <td>电影名称</td>
        <td>主演</td>
        <td>上映时间</td>
        <td>时长</td>
        <td>评分</td>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, i) in data.result" :key="item.id">
        <td>
          <img :src="item.cover" width="200px">
        </td>
        <td>{{item.title}}</td>
        <td>{{item.star_actor}}</td>
        <td>{{item.showingon}}</td>
        <td>{{item.duration}}分钟</td>
        <td>{{item.score}}分</td>
      </tr>
    </tbody>
  </table>
  </div>
</template>

<script>
  import axios from 'axios'
  export default {
     data(){
      return {
        data:{},
      }
    },

    methods: {
        getMovies(){
          let url = 'https://web.codeboy.com/bmdapi/movie-infos'
          // 创建axios实例
          let instance = axios.create()
          instance(url, {
            method:'get',
            params:{page:1, pagesize:10},
            headers:{'headername':'headervalue'}
          }).then(res=>{
            console.log(res)
            // 将结果对象存入this.data : {page,pagesize,result,total}
            this.data = res.data.data
          })
        }
    },

  }
</script>

<style lang="sass" scoped>

</style>

基于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 ，增加代码复用性与可维护性。

案例：

<template>
  <div>
    <input v-model="keyword" type="text" placeholder="请输入查询关键字">
    <button @click="getMoviesLike">点我模糊查询电影列表</button>
    <br><br>

    <button @click="getMovies">发送请求：访问上映电影</button>
    <br><br>

  <table style="width:1000px, margin: 0px auto;" >
    <thead>
      <tr>
        <td>封面</td>
        <td>电影名称</td>
        <td>主演</td>
        <td>上映时间</td>
        <td>时长</td>
        <td>评分</td>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, i) in data.result" :key="item.id">
        <td>
          <img :src="item.cover" width="200px">
        </td>
        <td>{{item.title}}</td>
        <td>{{item.star_actor}}</td>
        <td>{{item.showingon}}</td>
        <td>{{item.duration}}分钟</td>
        <td>{{item.score}}分</td>
      </tr>
    </tbody>
  </table>
  </div>
</template>

<script>
  // import qs from 'qs'  (方法3的前提，需要引入qs模块，下载qs模块命令：npm i qs)
  import axios from 'axios'
  export default {
     data(){
      return {
        keyword:'',   //绑定搜索关键字
        data:{},     //用于绑定电影列表请求的响应结果：{page,pagesize,result}
      }
    },

    methods: {
      // 通过关键字模糊查询电影(方法1)
      getMoviesLike(){
        let url = 'https://web.codeboy.com/bmdapi/movie-infos/name'
        let data = `name=${this.keyword}&page=1&pagesize=10`
        axios.post(url,data).then(res=>{
          console.log(res)
          this.data = res.data.data
        })
      },

      // // 通过关键字模糊查询电影（方法2）
      // getMoviesLike(){
      //   let url = 'https://web.codeboy.com/bmdapi/movie-infos/name'
      //   let instance = axios.create()
      //   instance({
      //     url:url,
      //     method:'post',
      //     data:`name = ${this.keyword}&page=1&pagesize=10`
      //   }).then(res=>{
      //     console.log(res);
      //   })
      // },

      // 通过关键字模糊查询电影  （方法3，用qs模块）
      //       getMoviesLike(){
      //   let url = 'https://web.codeboy.com/bmdapi/movie-infos/name'
      //   let param = qs.stringify({name:this.keyword, page:1, pagesize:5})
      //   console.log(param)
      //   let instance = axios.create()
      //   instance({
      //     url:url,
      //     method:'post',
      //     data: param
      //   }).then(res=>{
      //     console.log(res)
      //     this.data = res.data.data   //请求结果显示出来
      //   })
      // },

      // 点击按钮后执行该方法，发送http请求，获取电影列表
        getMovies(){
          let url = 'https://web.codeboy.com/bmdapi/movie-infos'
          // 创建axios实例
          let instance = axios.create()
          instance(url, {
            method:'get',
            params:{page:1, pagesize:10},
            headers:{'headername':'headervalue'}
          }).then(res=>{
            console.log(res)
            // 将结果对象存入this.data : {page,pagesize,result,total}
            this.data = res.data.data
          })
        }
    },

  }
</script>

<style lang="sass" scoped>

</style>

封装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文件中的使用：

<template>
  <div>
    <button @click="getDirectors">获取导演列表</button>
    <br><br>
    <div class="item" v-for="item in direcotors" :key="item.id">
      <img :src="item.direcotor_avatar" width="100px">
      <p>{{item.director_name}}</p>
    </div>
  </div>
</template>

<script>
import myaxios from './http/MyAxios'

  export default {
    data(){
      return {
        direcotors: [],   //绑定所有的导演
      }
    },
    methods :{
      getDirecotors(){
        let url = 'http://web.codeboy.com/bmdapi/movie-directors'
        let params = {page:1, pagesize:100}
        myaxios.get(url,params).then(res=>{
          console.log(res)
          this.direcotors = res.data.data
        })
      }
    },
  }
</script>

<style lang="scss" scoped>
.item {
  margin: 5px;
  display: inline-block;
  width: 110px;
  padding: 5px;
  border: 1px solid #ccc;
  text-align: center;
}
</style>