使用递归多次请求接口并发送需要修改的数据。

今天拿到一个事，老板说有3000多条数据需要在里面填充经纬度，每一条都有一个地址，根据这个地址请求天地图官方解析出来的经纬度，将值填充进去。第一反应是网上搜索，捡现成的，看了下没搜出来就自己写逻辑了。其实很简单。

api 接口

// 这是简单的封装，针对post封装
const request = ({url, method = 'post', params = {}}) => {
  params = Object.assign(params, {key: keystr()})
  return new Promise((resolve, reject) => {
    const result = axios({ url, method, data: Qs.stringify(params) });
    result.then(value => resolve(value), reason => reject(reason));
  })
};

// 其他接口
export const geocoder = params => axios({url: 'http://api.tianditu.gov.cn/geocoder', method: 'POST', params});

export const getCompanyList = async params => await request({url: 'getCompanyList', params});

export const updateCompany = async params => await request({url: 'updateCompany', params});

业务代码

<template>
  <div>
    request
  </div>
</template>

<script>
import { getCompanyList, updateCompany, geocoder } from "@/api";
let index = 0;
let err = 0
export default {
  name: "req",
  data() {
    return {
      data: [],
      params: {
        年度: "",
        企业: "",
        企业x: "",
        企业y: "",
        区域: "",
        领域: "",
        地址: "",
        地址x: "",
        地址: ""
      }
    };
  },

  mounted() {
    const p_all= Promise.all([this.request()]); // 我这里3000条数据很庞大，请求有点慢，放在回调执行递归
    p_all.then(r => this.fn())
  },

  methods: {
    async request() {
      const { data, status } = await getCompanyList();
      this.data = data;
    },
    /**
     * 1.根据data的企业请求接口获取企业单位 长度为3261条
     * 2.根据企业单位请求天地图官方接口拿到经纬值
     * 3.将返回值的经纬度值获取后请求后端数据更新接口发送请求
     * 4.成功和失败都将继续下一个数据请求。直到数据请求完毕
     */
    async fn() {
      this.params = this.data[index];
      const __params__ = {	// 请求天地图平台获取对应地址的经纬度
        tk: "**************************", // koken需要申请，官方寻
        ds: JSON.stringify({
          keyWord: this.params['地址']
        })
      };
      try {	// 在这里使用了try catch进行了错误捕获，应为有时候经纬度值是空值，再或者是服务器后台满足不了递归带来的压力导致代码报错而导致阻塞。
        const { data: { location: { lon, lat }, msg } } = await geocoder(__params__);	// 将数据层级解构，方便使用。
        if (msg === 'ok') {
          this.params['地址x'] = lon;
          this.params['地址y'] = lat;
          const company = JSON.stringify(this.params).replace(/null/g, 0); // 这一步是将服务器返回的null值替换为0，字段不止这几个字段
          const { data, status } = await updateCompany({company});
        }
      } catch (error) {	// 记录错误数量。
        err ++;
        console.log('共'+ err + '个：err');
      }
      index++	// 修改准备好的索引值
      if (index > this.data.length - 1) {	// 这里设置递归出口，满足条件来个提示，这里我选择的抛异常来阻塞，当然return 也是可以的
        throw new Error('执行完成'+ index)
      } 
      else {	// 继续递归 并记录当前经度。
        console.log("第" + index + '个成功')
        return this.fn()
      }
    }
  }
  //  End
};
</script>

<style lang='css' scoped>
</style>