vue系列教程-14axios的使用

本内容为系列内容，全部内容请看我的vue教程分类

• 我的个人博客
• 本节仓库地址
• 视频教程地址

什么是Axios

• 是一个基于promise（承诺）的HTTP网络请求库
• 可以用于浏览器和node.js项目
• vue官方推荐的请求库，从以前的vue-resource到axios

通俗点说就是对JavaScript的http请求的二次封装，就类似jQuery的ajax

中文文档立即查看

原则上学习这一节需要mock数据相关的知识，但是鉴于大家都是初学者，所以不使用mock的方式，但是大家感兴趣的可以去搜索一下mock的教程，实际开发中也是常用的

安装和使用

这里我们使用前面创建的 vueclidemo这个项目，也可以你自己重新创建一个脚手架项目

npm i axios

使用 npm run serve将项目运行起来

来到Helloworld这个组件里面，删除掉不用的东西

请求方式

• get请求 获取数据
• post请求 提交数据
• put请求 更新数据
• patch请求 更新部分数据
• delete请求 删除数据

mock数据

真实开发是先沟通制定好api接口文档，那么我们这里先自己 mock 一个假数据，这一部分也是开发中常用的点，感兴趣的朋友可以搜索一下 mock 相关的教程

我在当前项目创建了一个mock文件夹，里面是一个模拟后台的代码，使用express进行编写，考虑到初学前端的朋友不了解，直接运行项目就行了，具体代码和本节没有关系

命令行来到 mock 文件夹，首先需要npm install下载依赖，执行node命令即可运行项目

浏览器打开查看是否运行成功

api文档

路径	请求类型	参数
/get	get
/post	post	json 格式user对象
/postformdata	post	formdata格式user对象
/put	put	user对象
/del	delete	name 字符串
/sexlist	get

引入axios

然后我们在helloworld组件的 script标签下中引入axios

import axios from "axios";

get请求

我们在methods中定义一个方法，并编写一个axios的get请求，params就是需要传递的参数，会被拼接到url地址中

getData() {
   
      axios
        .get("http://localhost:3000/get", {
   
          params: {
   
            name: "lili"
          }
        })
        .then(res => {
   
          console.log(res.data);
        })
        .catch(err => {
   
          console.log(err);
        });
    },

也可以这样写

axios({
   
  method: "get",
  url: "http://localhost:3000/get"
}).then(res => {
   
  console.log(res.data);
});

然后我们在 created生命周期调用这个方法

  created() {
   
    this.getData();