如何将以下常规 JavaScript 代码转换为 VueJS？答案

【问题标题】：How can I convert my following regular JavaScript code to VueJS?如何将以下常规 JavaScript 代码转换为 VueJS？
【发布时间】：2021-01-27 16:35:19
【问题描述】：

import request from "request";

var apikey = "?api_key=" + "???";
var region = localStorage.getItem("region").toLowerCase() + "1";
var user = "???";

request({
    url: "https://" + region + ".api.riotgames.com/lol/summoner/v4/summoners/by-name/" + user + apikey,
    json: true,
},  function(error, response, body) {
        if(!error && response.statusCode == 200) {
            var toParse = body;
            var name = toParse.name;
            console.log("Name: " + name);
        }
});

所以这是一个使用riots api的代码，我想把它转换成vue js。任何想法如何做到这一点？ :O

【问题讨论】：

如果 javascript 已经在浏览器中运行，那么它将在 vue 中运行......您如何使用该代码或其结果取决于您想用它做什么
这篇文章有很好的解释可以参考how to fetch API vuejs-2

标签： javascript vue.js

【解决方案1】：

你可以使用 Axios：

import axios from 'axios';

const apikey = "?api_key=" + "???";
const region = localStorage.getItem("region").toLowerCase() + "1";
const user = "???";

export function makeRequest()
{
  return axios.get(
    "https://" + 
    region + 
    ".api.riotgames.com/lol/summoner/v4/summoners/by-name/" + 
    user + apikey)
    .then(response =>
    {
      return response.data.name;
    }).catch(error =>
    {
      return null;
    });
}

如果你返回从 Axios 收到的 Promise 而不是它的结果，也许会更好——这样你就可以用 Promise 做任何你想做/需要的事情，例如出现错误时显示一些通知。

【讨论】：