vue手撸移动端后台（7）axios网络请求和模拟数据

最新推荐文章于 2023-03-09 08:30:00 发布

林子曰

最新推荐文章于 2023-03-09 08:30:00 发布

阅读量569

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_21019419/article/details/89854070

版权

本文介绍如何在Vue项目中手写移动端后台，使用axios进行网络请求，并利用模拟数据接口http://jsonplaceholder.typicode.com/进行数据操作。通过封装axios，设置环境切换、token处理和错误处理，实现下拉刷新（van-pull-refresh）和滑动加载更多（van-list）功能。

摘要由CSDN通过智能技术生成

我们的前端页面大致上整理完毕，下面进入对数据的操作了，不然不知道怎么结合数据岂不是瞎玩么。
有一些么有后台接口经验的前端同学也不要慌，咱们搞个简单的，也不要自己提供接口，网上都有写好的。

http://jsonplaceholder.typicode.com/
这个网站，提供了公共的一些可以访问的接口

我们就用这个网站的接口了，直接浏览器访问就有返回数据

获取10个用户：http://jsonplaceholder.typicode.com/users
获取单个用户：http://jsonplaceholder.typicode.com/users/1
获取100个post：http://jsonplaceholder.typicode.com/posts
获取单个post：http://jsonplaceholder.typicode.com/posts/1

我们改造一下users的列表样式，让他好看点。然后实现一下下拉刷新和滑动到底部加载更多数据。
这里用到的2个控件：van-list和van-pull-refresh，还有网络请求插件axios。

1. axios

安装：npm i -S axios
使用axios是超级简单的，直接import，然后axios.get或者post就好了。但是实际项目中肯定不能这么简单的处理，代码很多重复，而且不方便管理。咱们自己包装一下。

之前在vue手撸移动端后台（4）项目结构以及首页中咱们划分了api有一个单独的目录，咱们的包装文件就放这个下面src/api下新建文件axios.js。

1.1 引入axios

// 页面的顶部第一行，引入axios
import axios from 'axios'

1.2 配置axios

既然是要包装，肯定不能直接就export了，做一些初始化配置

const service = axios.create({
   
    baseURL:
        process.env.NODE_ENV === 'production'
            ? '你的正式环境的域名api地址/vue/api'
            : 'http://jsonplaceholder.typicode.com/',
    timeout: 5000//超时时间为5s，超过5s没有返回数据就结束请求。
})

看上面的配置，咱们依据项目环境切换api的请求地址，所以当切换环境后，需要修改的地方就很少，不容易出错

1.3 token？

还有个问题，现在都是前后端分离的项目，为了保证接口调用验证用户，一般会用到token技术，axios怎么加token呢【如果不理解token也没关系，后端告诉你用户登录后会传回一个字符串token，存在前端，每次访问接口就带上这个token来】？

显然不可能每次axios请求都自己加token吧，还要从存储获取这个token，让后组装到header，传回去。没关系，axios的前置拦截器可以帮我们实现自动加token

// Add a request interceptor 在发送请求之前做一些处理, 比如加入token之类的
service.interceptors.request.use(
    function(config) {
   
        // 这里插入代码, 加入token, 
        return config
    },
    function(error) {
   //错误处理
        return Promise.reject(error)
    }
)

1.4 错误处理【不需要可以略过】

既然有token处理，那么如果超时或者网络异常了，怎么抓取到错误并给一个比较好的提示呢？这时就用到了axios的后置处理，比如我们希望请求不成功的时候，可以重复发送请求

// Add a response interceptor
//设置全局的请求次数，重试的时间间隔
service.defaults.retry = 0 //本项目关闭重复请求
service.defaults.retryDelay = 1000  //间隔时间

/**
 * 加入重新请求方法, 默认关闭
 */
service.interceptors.response.use(
    function(response) {
   
        // 请求返回处理,比如各类状态处理的, token过期等. 未登录等...
        // response中返回了各种http状态，可以依据返回进行提示操作。
        return response
    },
    function axiosRetryInterceptor(err) {
   
        let config = err.config
        // If config does not exist or the retry option is not set, reject
        if (!config || !config.retry) {
   
            return Promise.reject(err)
        }
        // Set the variable for keeping track of the retry count
        config.__retryCount = config.__retryCount || 0

        // Check if we've maxed out the total number of retries
        if (config.__retryCount >= config.retry) {
   
            // Reject with the error
            return Promise.reject(err)
        }

        // Increase the retry count
        config.__retryCount += 1

        // Create new promise to handle exponential backoff
        let backoff = new Promise(function(resolve) {
   
            setTimeout(function() {
   
                resolve()
            }, config.retryDelay || 1)
        })

        // Return the promise in which recalls axios to retry the request
        return backoff.then(function() {
   
            // 如果是开发环境使用的代理cors,这里的config.url需要再做下处理,不然url不正确.
            return service(config)
        })
    }
)

1.5 合并

在请求错误或者超时时，弹出一个提示框提示用户，我们加入vant的toast插件，最后的完整代码：

/**集成axios,做包装, */
import axios from 'axios'
import {
    Toast } from 'vant'
// axios初始化
const service = axios.create({
   
    baseURL:
        process.env.NODE_ENV === 'production'
            ? 'http://你的正式环境服务器api地址/vueapi'
            : 'http://jsonplaceholder.typicode.com/',
    timeout: 5000
})

// Add a request interceptor 在发送请求之前做一些处理, 比如加入token之类的
service.interceptors.request.use(
    function(config) {
   
        /**全局loading */
        if (config