美文网首页
5.使用axios

5.使用axios

作者: 面具猴 | 来源:发表于2019-06-11 11:18 被阅读0次

1.依赖
在项目目录,用命令行
npm install axios --save
2.导入项目中
在main.js中:
import axios from 'axios'
Vue.prototype.$axios = axios
3.不使用Vue的跨域解决方法,容易出问题。
直接使用axios的方式知道你BaseUrl即可。
3.0修改config/dev.env.js(开发环境),config/prod.env.js(发布环境)
增加BASE_API:
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
BASE_API: '"http://localhost:9011"'
})
3.1创建 src/utils/request.js:

import axios from 'axios';
const service = axios.create({
  timeout: 1500,
  baseURL: process.env.BASE_API
})
export default service

3.2以brand表为例,创建src/api/brand.js

import query from '@/utils/query'
const group_name = 'brand'
export default {
  save(pojo) {
    return query({
      url: `/${group_name}`,
      method: 'post',
      data: pojo
    })
  },
  deleteById(id) {
    return query({
      url: `/${group_name}/${id}`,
      method: 'delete'
    })
  },
  update(id, pojo) {
    return query({
      url: `/${group_name}/${id}`,
      method: 'put',
      data: pojo
    })
  },
  findAll() {
    return query({
      url: `/${group_name}`,
      method: 'get'
    })
  },
  findById(id) {
    return query({
      url: `/${group_name}/${id}`,
      method: 'get'
    })
  }
}

3.3在组件中使用
<script>中:

import brandApi from '@/api/brand'
......
methods: {
      save() {
        brandApi.save({
          name: "SM",
          first_char: "S"
        })
          .then(function (response) {
            console.log(response);
          })
          .catch(function (error) {
            console.log(error);
          });
      },
      deleteById() {
        brandApi.deleteById("30")
          .then(function (response) {
            console.log(response);
          })
          .catch(function (error) {
            console.log(error);
          });
      },
      update() {
        brandApi.update("26", {
          name: "三星",
          first_char: "S"
        })
          .then(function (response) {
            console.log(response);
          })
          .catch(function (error) {
            console.log(error);
          });
      },
      findAll() {
        brandApi.findAll()
          .then(function (response) {
            console.log(response);
          })
          .catch(function (error) {
            console.log(error);
          });
      },
      findById() {
        brandApi.findById("2")
          .then(function (response) {
            console.log(response);
          })
          .catch(function (error) {
            console.log(error);
          });
      }
    }

相关文章

网友评论

      本文标题:5.使用axios

      本文链接:https://www.haomeiwen.com/subject/aoiotctx.html