axios封装与使用-以生成图形验证码为例

什么是axios?

所谓axios,它是一个基于Promise的HTTP客户端，用于浏览器和Node.js环境中发送HTTP请求。它可以在前端与后端之间进行数据交互，支持各种请求方法（如GET、POST等）.并提供了丰富的功能和配置选项，如请求拦截、响应拦截、请求取消等。axios还支持异步请求、并发请求以及对请求和响应数据的转换和处理。它简洁易用，广泛应用于前端开发中。

为什么要使用axios?

提供了丰富的功能和配置选项，如请求拦截、响应拦截、请求取消等。axios还支持异步请求、并发请求以及对请求和响应数据的转换和处理。它简洁易用，广泛应用于前端开发中。为了便于使用，我们可以将axios请求方法封装到request模块中。

怎么使用axios?

1安装：

npm i axios

2导入

在utils下新建一个request.js文件，导入包

import axios from 'axios'

3创建axios实例

const instance = axios.create({
  baseURL: 'http://cba.itlike.com/public/index.php?s=/api/',
  timeout: 5000

})

4完成一些基本的配置

在这里，首先，需要配置请求和响应拦截器

详细代码如下

// 添加请求拦截器
instance.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  return config
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error)
})
// 添加响应拦截器
instance.interceptors.response.use(function (response) {
  // 2xx 范围内的状态码都会触发该函数。
  // 对响应数据做点什么
  // 默认axios会多包装一层data
  return response.data
}, function (error) {
  // 超出 2xx 范围的状态码都会触发该函数。
  // 对响应错误做点什么
  return Promise.reject(error)
})

5导出：

export default instance

6测试使用：

import request from '@/utils/request'
export default {
  name: 'LoginIndex',
  async created () {
    const res = await request.get('/captcha/image')
    console.log(res)
  }
}

保存之后，打开浏览器我们看到控制台返回了一些结果：

所谓图形验证码，实质上就是一个请求回来的图片，要实现这一功能需要我们做的就是将传回来的图片地址在页面中渲染出来，可以采用如下代码

首先，定义返回的数据，

 data () {
    return {
      picCode: '', // 用户输入的验证码
      picKey: '', // 请求传递的图形验证码唯一标识
      picUrl: '' // 请求渲染的图片地址
    }

紧接着，将获取图形验证码的方法进行封装

 async created () {
    this.getPicCode()
  },
  methods: {
    async getPicCode () {
      const { data: { base64, key } } = await request.get('/captcha/image')
      this.picUrl = base64
      this.pickey = key
    }
  }
}

最后，在页面中渲染

<img src = "picUrl">

运行结果如下所示

由于我这边没有设置太多的css属性，导致显示的不是很好，但功能是实现的。

好啦，以上就是axios封装与使用的详细步骤，希望对大家有所帮助~