zoukankan      html  css  js  c++  java
  • 前端基于axios封装api

    封装思想:

    封装:

    /**
    * Created by Administrator on 2017/7/20 0020.
    */
    import Vue from 'vue'
    import axios from 'axios'
    import qs from 'qs'

    axios.interceptors.request.use(config => {
    // loading
    return config
    }, error => {
    return Promise.reject(error)
    });

    axios.interceptors.response.use(response => {
    return response
    }, error => {
    return Promise.resolve(error.response)
    });

    function checkStatus (response) {
    // loading
    // 如果http状态码正常,则直接返回数据
    if (response && (response.status === 200 || response.status === 304 || response.status === 400)) {
    return response;
    // 如果不需要除了data之外的数据,可以直接 return response.data
    }
    // 异常状态下,把错误信息返回去
    return {
    status: -404,
    msg: '网络异常'
    }
    }

    function checkCode (res) {
    // 如果code异常(这里已经包括网络错误,服务器错误,后端抛出的错误),可以弹出一个错误提示,告诉用户
    if (res.status === -404) {
    // alert(res.msg)
    }
    if (res.data && (!res.data.success)) {
    // alert(res.data.error_msg)
    }
    return res
    }

    export default {
    install(Vue,options)
    {
    Vue.prototype.post=(url, data)=>{
    return axios({
    method: 'post',
    baseURL: 'http://aaa.xinphoto.me/index.php',
    url,
    data: qs.stringify(data),
    timeout: 10000,
    headers: {
    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
    }
    }).then(
    (response) => {
    return checkStatus(response)
    }
    ).then(
    (res) => {
    return checkCode(res)
    }
    )
    };
    Vue.prototype.get=(url, params) =>{
    return axios({
    method: 'get',
    baseURL: 'http://aaa.xinphoto.me/index.php',
    url,
    params, // get 请求时带的参数
    timeout: 10000
    }).then(
    (response) => {
    return checkStatus(response)
    }
    ).then(
    (res) => {
    return checkCode(res)
    }
    )
    };
    Vue.prototype.all=([callback1,callback2,callback])=>{
    return axios.all([callback1,callback2,callback]).then(axios.spread(function(acct,perms,res){
    return [acct,perms,res]
    }))
    }
    },
    post(url, data){
    return axios({
    method: 'post',
    baseURL: 'http://aaa.xinphoto.me/index.php',
    url,
    data: qs.stringify(data),
    timeout: 10000,
    headers: {
    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
    }
    }).then(
    (response) => {
    return checkStatus(response)
    }
    ).then(
    (res) => {
    return checkCode(res)
    }
    )
    },
    get(url, params){
    return axios({
    method: 'get',
    baseURL: './static/image.json',
    url,
    params, // get 请求时带的参数
    timeout: 10000
    }).then(
    (response) => {
    return checkStatus(response)
    }
    ).then(
    (res) => {
    return checkCode(res)
    }
    )
    }
    }
  • 相关阅读:
    CLR via C#(11)-无参属性、索引器
    CLR via C#(10)-参数
    C#委托的介绍(delegate、Action、Func、predicate)
    MVC3使用Unity实现接口自动注册
    CLR via C#(09)-扩展方法
    CLR via C#(08)-操作符
    CLR via C#(07)-静态类,分部类
    CLR via C#(06)- 构造器
    VS2010几款超赞的扩展辅助工具总结
    web前端开发随手笔记
  • 原文地址:https://www.cnblogs.com/QxkWeb/p/7323589.html
Copyright © 2011-2022 走看看