Extjs 自定义 Proxy 适配 Asp.net web api GET POST PUT DELETE

1.问题描述

Extjs前端向后台请求时，默认的actionMethods:{ create: 'POST', read: 'GET', update: 'POST', destroy: 'POST' }，而Asp.net web api的ApiController 是{ create: 'POST', read: 'GET', update: 'PUT', destroy: 'DELETE' }，并且PUT和DELETE要在URL中包含id参数，两者不兼容。

微软默认的ApiController :Values.cs如下

    public class ValuesController : ApiController
    {
        // GET api/values
        public IEnumerable<string> Get()
        {
            return new string[] { "value1", "value2" };
        }

        // GET api/values/5
        public string Get(int id)
        {
            return "value";
        }

        // POST api/values
        public void Post([FromBody]string value)
        {
        }

        // PUT api/values/5
        public void Put(int id, [FromBody]string value)
        {
        }

        // DELETE api/values/5
        public void Delete(int id)
        {
        }
    }

2.解决方法：前端自定义Proxy

Extjs是鼓励开发者自定义Proxy的，在senchacmd新建的app中就包含了Api.js，用来自定义Proxy。

关于如何自定义Proxy，可以看这篇文章。

我自定义的Proxy代码如下：

Ext.define('App.proxy.API', {
    extend: 'Ext.data.proxy.Ajax',
    alias: 'proxy.api',

    directionParam: null, 
    filterParam: null, 
    groupDirectionParam: null, 
    groupParam: null, 
    limitParam: null, 
    pageParam: null, 
    sortParam: null, 
    startParam: null,

    controller: '',     
    
    api: { 
        create: '/api/{controller}', 
        read: '/api/{controller}/{id}', 
        update: '/api/{controller}/{id}', 
        destroy: '/api/{controller}/{id}' 
    }, 
    actionMethods :{
        create:'POST',
        read:'GET',
        update: 'PUT',
        destroy: 'DELETE'
    },

    buildUrl: function(request) { 
        var url = this.callParent(arguments); 
 
        return this.replaceTokens(url, request); 
    }, 
 
    replaceTokens: function(str, request) { 
        var me = this; 
 
        return str.replace(/{(.*?)}/g, function(full, token) { 
            // We read the id from the request params, the contoller is read from the proxy itself 
            var tokenval = "";
            if(request.params && request.params[token]){
                tokenval = request.params[token];
            }else if(me[token]){
                tokenval = me[token];
            }else if(request.getAction()=='destroy' || request.getAction()=='update'){
                var records = request.getRecords();
                if(records && records.length){
                    tokenval = records[0].id;
                }
            }//从提交的记录(payload)中找到id，放到url中.
            return tokenval; 
        }); 
    },

    headers: { Authorization: localStorage.getItem('auth') },

    reader: {
        type: 'json'
    },
    writer:{ writeAllFields:true }
});

主要逻辑就是构造url，使PUT、DELETE时url能够带上参数id。

3.效果及待改进的地方

成功适配了GET，GET(id)，Post；以及单条修改 PUT 和单条删除 DELETE

待改进的地方：前端Store如果批量提交 PUT、DELETE，可能存在问题。