axios简单封装

最新推荐文章于 2024-07-13 19:15:00 发布

qq_34114535

最新推荐文章于 2024-07-13 19:15:00 发布

阅读量103

点赞数 1

文章标签：前端 javascript

本文链接：https://blog.csdn.net/qq_34114535/article/details/137222464

版权

本文介绍了如何使用axios库进行HTTP请求的封装，包括GET、POST、PUT和DELETE方法，并展示了如何在获取API数据后，在地图上添加标记和弹窗交互。

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

import axios from "axios"
import api from "./apis"
import qs from "qs"
import store from '@/store/index.js';
// store.state
// axios.defaults.headers.Authorization = "Bearer " + getCookie("access_token")
const request = {
  // 用法如下，调用时需要传入topic（api名），参数随api不同以对应
  post(topic, data) {
    store.dispatch('loadingStart', {
      text: "加载中",
      opacity: 0.5
    })
    return new Promise((resolve, reject) => {
      axios.post(api(topic), data).then(response => {
        store.dispatch('loadingDone')
        resolve(response.data)
      }, err => {
        store.dispatch('loadingDone')
        reject(err)
      })
    })
  },
  get(topic, data) {
    store.dispatch('loadingStart', {
      text: "加载中",
      opacity: 0.5
    })
    return new Promise((resolve, reject) => {
      axios.get(api(topic), {
        params: data
      })
        .then(response => {
          store.dispatch('loadingDone')
          resolve(response.data)
        }, err => {
          store.dispatch('loadingDone')
          reject(err)
        })
    })
  },
  put(topic, data) {
    store.dispatch('loadingStart', {
      text: "加载中",
      opacity: 0.5
    })
    return new Promise((resolve, reject) => {
      axios.put(api(topic), qs.stringify(data))
        .then(response => {
          store.dispatch('loadingDone')
          resolve(response.data)
        }, err => {
          store.dispatch('loadingDone')
          reject(err)
        })
    })
  },
  delete(topic, data) {
    store.dispatch('loadingStart', {
      text: "加载中",
      opacity: 0.5
    })
    return new Promise((resolve, reject) => {
      axios.delete(api(topic), {
        params: data
      })
        .then(response => {
          store.dispatch('loadingDone')
          resolve(response.data)
        }, err => {
          store.dispatch('loadingDone')
          reject(err)
        })
    })
  }
}
function getCookie(cname) {
  var name = cname + "=";
  var ca = document.cookie.split(';');
  for (var i = 0; i < ca.length; i++) {
    var c = ca[i].trim();
    if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
  }
  return "";
}
export default request


使用

let soilPoint = await request.get("soitPoint", {
        appCode: "changshan"
      })
      for (let item of soilPoint.result) {
        let marker = new mapboxgl.Marker()
          .setLngLat([item.lon, item.lat])
          .addTo(this.map);
        // 添加标记的弹窗事件
        var popup = new mapboxgl.Popup()
          .setHTML(`<h3>${item.name}</h3>`)
        marker.setPopup(popup);
        // 点击标记时显示弹窗
        marker.on('click', function () {
          marker.togglePopup();
        });
      }