美文网首页
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