axios及requests安装使用

最新推荐文章于 2024-08-12 17:01:01 发布

Ricky110

最新推荐文章于 2024-08-12 17:01:01 发布

阅读量3.1k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/Ricky110/article/details/78221263

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

axios及requests安装使用

axios相关

作用: axios用于http请求

axios安装

npm install –save axios , –save才能安装到项目的node_modules中

axios 使用

main.js中导入

import axios from 'axios'
Vue.prototype.$http = axios

然后在 main.js 中添加了这两行代码之后，就能直接在组件的 methods 中使用 $http命令

get请求

// 向具有指定ID的用户发出请求
$http.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
// 也可以通过 params 对象传递参数
$http.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

post请求

$http.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

axios更多用法: http://www.cnblogs.com/zhouyangla/p/6753673.html

mockjs 相关

作用: mockjs用于拦截ajax请求，生成随机数据，使前端独立于后端开发

安装

npm install –save mockjs

使用

src/mcok/mock.js 生成请求数据

import Mock from 'mockjs';

export default {
    mockData () {
        Mock.mock('/api/test1', {
            "code": "000",
            "datas": {
                "name": "@cname", // 内容：npm安装后 mockjs/src/mock/random/xxx.js
                "area": "@province(true)",
                "identity": "超级管理员"
            }
        });
    },
    mockData () {
        Mock.mock('/api/test2', {
            "code": "000",
            "datas": {
                "name": "@cname", // 内容：npm安装后 mockjs/src/mock/random/xxx.js
                "area": "@province(true)",
                "identity": "超级管理员"
            }
        });
    },

};

main.js

import Mock from './mock/mock';
Mock.mockData();

接口请求

<template>
<div>
      我是第san个页面
      <el-row>
        <el-button type="primary" @click="test_axios">test mock</el-button>
      </el-row>
       <div>
        <el-card>
           输出: {{message}}
        </el-card>
       </div>
</div>
</template>
<script >
    export default {
        data() {
            return {
               message: ''
            }
        },
        methods: {
            test_axios: function () {
                console.log('aaaaa');
                self=this;
                this.$http.post('/api/test', {
                  })
                  .then(function (response) {
                        self.message = response;
                        console.log(response);
                  })
                  .catch(function (error) {
                    console.log(error);
                  });
            },

        }
    }
</script>