第一次在Vue中完整使用AJAX请求和axios.js的实战记录_vue.js_

npm i express # 安装 也可以使用cnpm npm init --yes # 查看是否安装到当前环境中 

// express.js const { response } = require('express'); const express = require('express'); const app = new express(); //app.post('/server', (request, response) => { // // 设置响应头 设置允许跨域 // response.setHeader("Access-Control-Allow-Origin", "*"); // // 设置响应体 // response.send("HELLO ZHUBA POST"); // }); app.post('/server', (request, response) => { // 设置响应头 设置允许跨域 重点注意此处 response.setHeader("Access-Control-Allow-Origin", "*"); // 设置响应体 response.send("HELLO ZHUBA"); }); app.listen(8000, () => { console.log("服务已经启动， 8000端口监听中...."); }); // 先运行 

// GET-HTML 点击发送请求

app.post('/server', (request, response) => { // 设置响应头 设置允许跨域 response.setHeader("Access-Control-Allow-Origin", "*"); // 设置响应体 response.send("HELLO ZHUBA POST"); }); 

// POST-HTML 

import axios from './plugins/axios

 created() { const _this = this axios.get('http://localhost:8181/book/findAll/0/6').then(function(resp){ console.log(resp); _this.tableData = resp.data.content _this.pageSize = resp.data.size _this.total = resp.data.totalElements }) } 

// 注意此时只安装在该工作区 npm install --save axios cpnm install --save axios 

const axios = require('axios');

https://geoapi.qweather.com/v2/city/lookup?location=${city}&key=${key} // city为字符如'北京' // key为控制台key https://devapi.qweather.com/v7/weather/now?location=${data}&key=${key} // 此处data为前面一个得到的地址的id，如'北京'为：101010100 

// 导入axios const axios = require("axios"); 

// 异步函数 async beforeMount() { } 

async beforeMount() { // 设置好参数此处写死的，可以用Vue传参等 let key = "fe5812813b8449bb8b4b6ec490ff5cf1"; let city = "湘潭"; // 拼接好请求 把其输入浏览器导航有数据即可,结果参考下图 // https://geoapi.qweather.com/v2/city/lookup?location=湘潭&key=fe5812813b8449bb8b4b6ec490ff5cf1 let httpUrl1 = `https://geoapi.qweather.com/v2/city/lookup?location=${city}&key=${key}`; }, 

async beforeMount() { // 设置好参数此处写死的，可以用Vue传参等 let key = "fe5812813b8449bb8b4b6ec490ff5cf1"; let city = "湘潭"; // 拼接好请求 把其输入浏览器导航有数据即可,结果参考下图 // https://geoapi.qweather.com/v2/city/lookup?location=湘潭&key=fe5812813b8449bb8b4b6ec490ff5cf1 let httpUrl1 = `https://geoapi.qweather.com/v2/city/lookup?location=${city}&key=${key}`; // 发起请求注意此处的await, 不加上，只能得到pending: 初始状态，不是成功或失败状态，如下图 let data1 = await axios.get(httpUrl1); // =Promise{} },